Trying save image in disk and retrieve links to display.

[fzsf163]

So I am trying to get image saved (uploaded) to local dir (public/img).
This is the code for that

// api.get.tsx [in routes folder]

import type { LoaderFunctionArgs } from "@remix-run/node";

import {
  ActionFunctionArgs,
  NodeOnDiskFile,
  json,
  unstable_composeUploadHandlers,
  unstable_createFileUploadHandler,
  unstable_createMemoryUploadHandler,
  unstable_parseMultipartFormData,
} from "@remix-run/node";

type UploadingFiles = {
  name: string;
  url: string;
  size: number;
}[];

const Make_Url = (
  _uploadingFiles: { name: string; url: string; size: number }[],
) => {
  return console.log("🚀 ~ _uploadingFiles:", _uploadingFiles);
};

export const loader = async ({ request }: LoaderFunctionArgs) => {
  return json({ loader: request });
};
export const action = async ({ request }: ActionFunctionArgs) => {
  // console.log("🚀 ~ action ~ request:", request);
  switch (request.method) {
    case "POST": {
      /* handle "POST" */
      let formData = await unstable_parseMultipartFormData(
        request,
        unstable_composeUploadHandlers(
          unstable_createFileUploadHandler({
            // Limit file upload to images
            filter({ contentType }) {
              return contentType.includes("image");
            },
            // Store the images in the public/img folder
            directory: "./public/img",
            // By default, `unstable_createFileUploadHandler` adds a number to the file
            // names if there's another with the same name; by disabling it, we replace
            // the old file
            avoidFileConflicts: false,
            // Use the actual filename as the final filename
            file: ({ filename }) => {
              const fname = filename.split(" ").join("_");
              return fname;
            },
            // Limit the max size to 10MB
            maxPartSize: 10_000_000,
          }),
          unstable_createMemoryUploadHandler(),
        ),
      );

      formData.forEach((f) => console.log(f));
      let files = formData.getAll("file") as NodeOnDiskFile[];
      console.log("🚀 ~ action ~ files:", files);

      let uploadingFiles = files
        ?.filter((value: unknown): value is File => value instanceof File)
        .map((file) => {
          console.log("🚀 ~ action ~ formData:", formData);
          let name = file.name;
          let size = file.size;
          // This line is important; it will create an Object URL, which is a `blob:` URL string
          // We'll need this to render the image in the browser as it's being uploaded
          let url = URL.createObjectURL(file);
          return { name, url, size };
        });

      // let urlObj = uploadingFiles.map((f) => {
      //   const f_obj = { file: { url: f.url, name: f.name, size: f.size } };
      //   return f_obj;
      // });

      return uploadingFiles.map((f) => {
        json({
          success: 1,
          file: {
            url: f.url,
            name: f.name,
            size: f.size,
            // ... and any additional fields you want to store, such as width, height, color, extension, etc
          },
        });
      });
    }
    case "PUT": {
      /* handle "PUT" */
      return new Response("PUTTT");
    }
    case "PATCH": {
      /* handle "PATCH" */
      return new Response("PATCHHHHH");
    }
    case "DELETE": {
      /* handle "DELETE" */
      return new Response("DELEETETEE");
    }
  }
};

and this is the hook that access it.

// imageUploader.tsx [inside app/utils folder]

import { useFetcher } from "@remix-run/react";
import { action } from "~/routes/api.get";

export function useFileUpload() {
  let { submit, data, state, formData } = useFetcher<typeof action>();
  let isUploading = state !== "idle";
  let uploadingFiles = formData
    ?.getAll("file-box")
    ?.filter((value: unknown): value is File => value instanceof File)
    .map((file) => {
      let name = file.name;
      let size = file.size;
      // This line is important; it will create an Object URL, which is a `blob:` URL string
      // We'll need this to render the image in the browser as it's being uploaded
      let url = URL.createObjectURL(file);
      return { name, url, size };
    });

  let images = (data?.files ?? []).concat(uploadingFiles ?? []);

  return {
    submit(files: FileList | null) {
      if (!files) return;
      let formData = new FormData();
      for (let file of files) formData.append("file", file);
      submit(formData, {
        method: "POST",
        encType: "multipart/form-data",
        action: "/api/get",
      });
    },
    isUploading,
    images,
  };
}

There are two things that access this api route.

1. Editor js
2. A react-dropzone component.

Editor js access the api like this - this does not use the useFileUpload hook.

// editor_js_tools.client.tsx [the tools collection for editor js]

// import Header from "@editorjs/header";
import List from "@editorjs/list";
// import Paragraph from "@editorjs/paragraph";
import ImageTool from "@editorjs/image";
import LinkTool from "@editorjs/link";
import Embed from "@editorjs/embed";
import Quote from "@editorjs/quote";
import Warning from "@editorjs/warning";
import Delimiter from "@editorjs/delimiter";
import Header from "editorjs-header-with-alignment";
const Paragraph = require("editorjs-paragraph-with-alignment");
const Checklist = require("@editorjs/checklist");
export const EDITOR_TOOLS = {
  header: {
    class: Header,
    inlineToolbar: true,
  },
  list: List,
  paragraph: {
    class: Paragraph,
    inlineToolbar: true,
  },
  image: {
    class: ImageTool,
    config: {
      endpoints: {
         // right here 👇
        byFile: "http://localhost:3000/api/get",  // Your backend file uploader endpoint
        byUrl: 'http://localhost:8008/fetchUrl [not my url but example]', // Your endpoint that provides uploading by Url 👈 this two comments from the tool github page readme.md
      },
    },
  },
  link: LinkTool,
  embed: Embed,
  quote: Quote,
  warning: Warning,
  delimiter: Delimiter,
  checklist: {
    class: Checklist,
    inlineToolbar: true,
  },
};

this is expected return for imageTool

{
    "success" : 1,
    "file": {
        "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
        // ... and any additional fields you want to store, such as width, height, color, extension, etc
    }
}

Now react-dropzone component looks like this-

// dragNdrop.client.tsx

import { useCallback } from "react";
import { useDropzone } from "react-dropzone";
import { fetchDest } from "remix-utils/sec-fetch";
import { useFileUpload } from "~/utils/imgUploader";
type FILE = {
  path: string;
  name: string;
  lastModified: number;
  lastModifiedDate: Date;
  webkitRelativePath?: string;
  size: number;
  type: string;
};
export default function MyDropzone() {
  const { images, isUploading, submit } = useFileUpload(); // 👈 the hook call
  console.log("🚀 ~ MyDropzone ~ images:", images); // 👈 this returns empty
  const onDrop = useCallback((acceptedFiles: any) => {
    console.log("🚀 ~ onDrop ~ acceptedFiles:", acceptedFiles);
    // Do something with the files
    submit(acceptedFiles);
    console.log("🚀 ~ MyDropzone ~ images: after submit", images);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the files here ...</p>
      ) : (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
    </div>
  );
}

Problem is the file is beign uploaded to the desired folder. But I do not get back the url to any of the two components. Editor js image-tool "sorry could not upload file" and react-dropzone component gets no image. What am I doing wrong. Please send help.

[kiliman]

You should do this instead:

return json(uploadingFiles.map(...))

[fzsf163]

I tried this way ,

 return json(
        uploadingFiles.map((f) => ({
          success: 1,
          file: {
            url: f.url,
            name: f.name,
            size: f.size,
          },
        })),
      );

but it says incorrect response.
Can I do something here to make it work , this from the image-tool github readme

import ImageTool from '@editorjs/image';

var editor = EditorJS({
  ...

  tools: {
    ...
    image: {
      class: ImageTool,
      config: {
        /**
         * Custom uploader
         */
        uploader: {
          /**
           * Upload file to the server and return an uploaded image data
           * @param {File} file - file selected from the device or pasted by drag-n-drop
           * @return {Promise.<{success, file: {url}}>}
           */
          uploadByFile(file){
            // your own uploading logic here
            return MyAjax.upload(file).then(() => {
              return {
                success: 1,
                file: {
                  url: 'https://codex.so/upload/redactor_images/o_80beea670e49f04931ce9e3b2122ac70.jpg',
                  // any other image data you want to store, such as width, height, color, extension, etc
                }
              };
            });
          },

          /**
           * Send URL-string to the server. Backend should load image by this URL and return an uploaded image data
           * @param {string} url - pasted image URL
           * @return {Promise.<{success, file: {url}}>}
           */
          uploadByUrl(url){
            // your ajax request for uploading
            return MyAjax.upload(file).then(() => {
              return {
                success: 1,
                file: {
                  url: 'https://codex.so/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',,
                  // any other image data you want to store, such as width, height, color, extension, etc
                }
              }
            })
          }
        }
      }
    }
  }

  ...
});

[fzsf163]

also I gotta add

  let files = formData.getAll("file") as NodeOnDiskFile[];
      console.log("🚀 ~ action ~ files:", files);  👈 this is not empty

      let uploadingFiles = files
        ?.filter((value: unknown): value is File => value instanceof File)
        .map((file) => {
          console.log("🚀 ~ action ~ formData:", formData);
          let name = file.name;
          let size = file.size;
          // This line is important; it will create an Object URL, which is a `blob:` URL string
          // We'll need this to render the image in the browser as it's being uploaded
          let url = URL.createObjectURL(file);
          return { name, url, size };
        });
      console.log("🚀 ~ action ~ uploadingFiles:", uploadingFiles); 👈 this is empty 

console log output for both ,

🚀 ~ action ~ files: [
  NodeOnDiskFile [File] {
    lastModified: 0,
    webkitRelativePath: '',
    prototype: Blob [File] {},
    filepath: 'C:\\MY_FILES\\Projects\\projects\\blog-candy-remix-fs - try\\public\\img\\pexels-karolina-grabowska-5422609.jpg',
    type: 'image/jpeg',
    slicer: undefined,
    name: 'pexels-karolina-grabowska-5422609.jpg'
  },
  NodeOnDiskFile [File] {
    lastModified: 0,
    webkitRelativePath: '',
    prototype: Blob [File] {},
    filepath: 'C:\\MY_FILES\\Projects\\projects\\blog-candy-remix-fs - try\\public\\img\\pexels-nicolas-postiglioni-421129.jpg',
    type: 'image/jpeg',
    slicer: undefined,
    name: 'pexels-nicolas-postiglioni-421129.jpg'
  }
]
☝️ both files exist.

🚀 ~ action ~ uploadingFiles: []  👈 empty

[kiliman]

What do you see in the Network tab?

[fzsf163]

this is what I see when wing editor js image tool

[fzsf163]

this is when using react-dropzone