From 8a33b6cea2372fc28e2b7320051c9849d54cd02e Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Tue, 27 Feb 2018 18:26:16 +0100
Subject: [PATCH] Fix bug delete picture and fix ImgPreview slider

---
 .../lib/src/components/ImgPreview/index.js    | 20 ++++++++++---------
 .../src/components/ImgPreviewHint/styles.scss |  1 +
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js
index cabce1fcad..8d952ca9e1 100644
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js
@@ -8,7 +8,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { cloneDeep, get, isEmpty, isObject, size } from 'lodash';
+import { cloneDeep, get, has, isEmpty, isObject, size } from 'lodash';
 import cn from 'classnames';
 
 import BkgImg  from 'assets/icons/icon_upload.svg';
@@ -25,6 +25,7 @@ class ImgPreview extends React.Component {
     isOver: false,
     isOverArrow: false,
     isImg: false,
+    isInitValue: false,
   };
 
   componentDidMount() {
@@ -43,16 +44,14 @@ class ImgPreview extends React.Component {
       this.updateFilePosition(nextProps.files.length - 1);
     }
 
-    // Update the preview
-    if (nextProps.didDeleteFile !== this.props.didDeleteFile) {
+    // Update the preview or slide pictures or init the component
+    if (nextProps.didDeleteFile !== this.props.didDeleteFile || nextProps.position !== this.props.position || size(nextProps.files) !== size(this.props.files) && !this.state.isInitValue) {
       const file = nextProps.files[nextProps.position] || '';
       this.generateImgURL(file)
-    }
 
-    // Slide pictures
-    if (nextProps.position !== this.props.position) {
-      const file = nextProps.files[nextProps.position] || '';
-      this.generateImgURL(file);
+      if (!this.state.isInitValue) {
+        this.setState({ isInitValue: true });
+      }
     }
   }
 
@@ -68,7 +67,7 @@ class ImgPreview extends React.Component {
    * @return {URL}
    */
   generateImgURL = (file) => {
-    if (this.isPictureType(file.name)) {
+    if (this.isPictureType(file.name) && !has(file, 'url')) {
       const reader = new FileReader();
       reader.onloadend = () => {
         this.setState({
@@ -78,6 +77,9 @@ class ImgPreview extends React.Component {
       }
 
       reader.readAsDataURL(file);
+    } else if (has(file, 'url')) {
+      const isImg = this.isPictureType(file.name);
+      this.setState({ isImg, imgURL: `${strapi.backendURL}${file.url}` });
     } else {
       this.setState({ isImg: false, imgURL: file.name });
     }
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/styles.scss b/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/styles.scss
index 9a463297ac..d23180f773 100644
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/styles.scss
@@ -1,5 +1,6 @@
 .imgPreviewHint {
   display: block;
+  width: 100%;
   position: absolute;
   top: 49px;
   padding: 12px 75px 0 75px;