How Can I know the file Path

[sidetrackprotocol]

I want to be able to view the image that was uploaded. That is the Image will show on the screen. In the image tag: <img src={thePathToImageThatWasUploaded} />

Now the issue is that the file object does not have the path to image

It only has the following properties:

name, multiple, label, ..... , handleChange, onDraggingStateChange, dropMessageStyle

Option | Type | Description | value example -- | -- | -- | -- name | string | the name for your form (if exist) | "myFile" multiple | boolean | a boolean to determine whether the multiple files is enabled or not | true OR false - false by default label | string | the label (text) for your form (if exist) inside the uploading box - first word underlined | "Upload or drop a file right here" disabled | boolean | this for disabled the input | true OR false hoverTitle | string | text appears(hover) when trying to drop a file | "Drop here" fileOrFiles | Array or File or null | this mainly made because if you would like to remove uploaded file(s) pass null or pass another file as initial |   classes | string | string with the classes wished to add | "drop_area drop_zone" types | Array | array of strings with extensions to check and go throw | ['png', 'jpeg', ...] onTypeError | function | function that will be called only of error occurred related to type | (err) => console.log(err) children | JSX Element, any | if you want to replace the current design inside the box of drop zone. (it will remove the default exist style) |

this is inside drop area

 or just text maxSize | number | the maximum size of the file (number in mb) | 2 minSize | number | the minimum size of the file (number in mb) | 1 onSizeError | function | function that will be called only if error related to min or max size occurred | (file) => console.log(file) onDrop | function | function that will be called when the user drops file(s) on the drop area only | (file) => console.log(file) onSelect | function | function that will be called when the user selects file(s) on click the file area only | (file) => console.log(file) handleChange | function | function that will be called when the user selects or drops file(s) | (file) => console.log(file) onDraggingStateChange | function | function that will be called with the state of dragging | (dragging) => console.log(dragging) dropMessageStyle | CSS Properties | A CSS property to style the hover message | {backgroundColor: 'red'}

[Dankni95]

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

[ycdaskin]

import { useState } from 'react';
import { FileUploader } from "react-drag-drop-files";

const FormImageInput = () => {

    const [imgData, setImgData] = useState()

    const fileTypes = ["JPG", "PNG"];

    const reader = new FileReader()
    reader.onload = e => {
        setImgData(e.target.result)
    }

    const handleChange = (file) => {
        reader.readAsDataURL(file)
    };

    return (
        <div>
            <FileUploader handleChange={handleChange} name="file" types={fileTypes} />
            <img src={imgData} width={200} />
        </div>

    );
}

export default FormImageInput;

this is the easiest way of previewing the image before upload. ofc there is no styling here. this is just for showing the logic.

[sidetrackprotocol]

setFileUrl(e.target.files[0])

this is the path to the file but when i do this inside the FileUploader tag i get error

But if I am using this function inside an <input /> tag it works

[sidetrackprotocol]

So this is what I did

const handleChange = (file) => {
    const reader = new FileReader()
    if (file) reader.readAsDataURL(file)

    reader.onload = (e) => {
      setImgBase64(e.target.result)
      setFileUrl(file)
    }
  };

I just discovered that the fileUrl is actually the argument that was received by the handleChange function

That is: const handleChange = (file) => {}

where (file) is the fileUrl

this will also be the same thing as: setFileUrl(e.target.files[0])

Initially I was using a html input tag to upload image but then i decided that i needed the react-drag-drop-files

The HTML looked like this:

            <div
                className="flex justify-between items-center bg-gray-800
                rounded-xl mt-5 mb-5"
              >
                <label className="block">
                  <span className="sr-only">Upload File</span>
                  <input
                    type="file"
                    accept="image/jpg, image/png, image/gif, image/svg, image/jpeg image/webp"
                    onChange={changeImage}
                    className="block w-full text-sm text-slate-500
                    file:mr-4 file:py-2 file:px-4 file:rounded-full
                    file:border-0 file:text-sm file:font-semibold
                    hover:File:bg-[#1d2631] focus:outline-none
                    focus:ring-0"
                    required
                  />
                </label>
              </div>

The changeImage() function looked like this:

const changeImage = async (e) => {
    const reader = new FileReader()
    if (e.target.files[0]) reader.readAsDataURL(e.target.files[0])

    reader.onload = (readerEvent) => {
      const file = readerEvent.target.result
      setImgBase64(file)
      setFileUrl(e.target.files[0])
    }
  }

So what I'm sayin was that when i was using the <input type="file" /> I was able to get what i wanted but switching to FileUploader (react-drag-drop-files) I wasnt aware that the argument (file) in handleChange (file) was actually what I needed to access the fileUrl

Issue is now resolved. I hope this comment helps others with same issue as mine