tried grid

src/components/editors/ImageEditor/index.tsx

@@ -86,14 +86,8 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
   useEffect(() => console.log({ data }), [data]);
 
   useEffect(() => {
-    console.log({ temp, files });
-
     Object.entries(statuses).forEach(([id, status]) => {
-      // todo: make this working
-      console.log({ id, uuid: status.uuid, file: files[status.uuid], files });
-
       if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
-        console.log(`${id} uploaded`);
         onFileAdd(files[status.uuid]);
         setTemp(temp.filter(el => el !== id));
       }
@@ -103,7 +97,7 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
   return (
     <ImageGrid
       items={data.files}
-      locked={temp.map(id => statuses[id])}
+      locked={temp.filter(id => !!statuses[id]).map(id => statuses[id])}
     />
   );
 };

src/components/editors/ImageGrid/index.tsx

@@ -17,7 +17,7 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc
     <div className={styles.grid}>
       {
         items.map((file, index) => (
-          <SortableItem key={file.id} index={index}>
+          <SortableItem key={file.id} index={index} collection={0}>
             <ImageUpload
               id={file.id}
               thumb={file.url}
@@ -25,6 +25,17 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc
           </SortableItem>
         ))
       }
+      {
+        locked.map((item, index) => (
+          <SortableItem key={item.temp_id} index={index} collection={1} disabled>
+            <ImageUpload
+              thumb={item.preview}
+              progress={item.progress}
+              is_uploading
+            />
+          </SortableItem>
+        ))
+      }
       <div style={{ clear: 'both' }} />
     </div>
   );

src/components/editors/ImageGrid/styles.scss

@@ -3,22 +3,22 @@
   padding-bottom: 60px;
   box-sizing: border-box;
 
-  // display: grid;
+  display: grid;
-  // grid-column-gap: $gap;
+  grid-column-gap: $gap;
-  // grid-row-gap: $gap;
+  grid-row-gap: $gap;
-  // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 
   // display: flex;
   // flex-wrap: wrap;
-  // @media (max-width: 600px) {
+  @media (max-width: 600px) {
-  //   grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
-  // }
+  }
 }
 
 .item {
   // flex: 0 4 25%;
-  width: 25%;
+  // width: 25%;
-  float: left;
+  // float: left;
   // padding: $gap / 2;
   z-index: 100;
   box-sizing: border-box;

src/redux/uploads/constants.ts

@@ -37,4 +37,5 @@ export const EMPTY_UPLOAD_STATUS: IUploadStatus = {
   progress: 0,
   thumbnail_url: null,
   type: null,
+  temp_id: null,
 }

src/redux/uploads/reducer.ts

@@ -11,6 +11,7 @@ export interface IUploadStatus {
   type: string;
   thumbnail_url: string;
   progress: number;
+  temp_id: UUID;
 }
 
 export interface IUploadState {

src/redux/uploads/sagas.ts

@@ -49,6 +49,7 @@ function* uploadFile({ file, temp_id }: IFileWithUUID) {
         preview,
         is_uploading: true,
         type: file.type,
+        temp_id,
       }
     )
   );