Rename file while uploading

[savasgok]

My problem in a nutshell; I am using react uploady component to upload images. The problem I need to rename the files while uploading but I couldn't find a way to do it.

I read all the documentation of react uploady and googled a lot but no luck. There are no relevant examples. There are examples how to rename file while uploading they don't work in this components logic.

Could anyone can help me?

https://stackoverflow.com/questions/76752328/renaming-filename-using-react-uploady

[yoavniran]

You can do the renaming either on the server or on the client.

On the client you can do it like so:

useRequestPreSend(({ items, options }) => {         
            
      items[0].file.name = "new name";

            return {
               items
            };  
        });

If you want to grab the new name from the client and pass it as a param for your server to handle the rename, you can do it like so:

useRequestPreSend(({ items, options }) => {         
           
            return {
              options: {
   params: {
                            newName: getNewName(items[0]),
                        }           
}
            };  
        });

The "newName" param will be submitted along with the uploaded file and you can use it on the server to save the file (make sure to sanitize and validate, of course).

In both cases, the hook to use is useRequestPreSend that allows you to make changes just before the request is sent.

answered on SO as well

[savasgok]

Thank you for the prompt response. I'll let you know if it worked

[savasgok]

I am using the example you provided here https://react-uploady.org/docs/guides/AddRemoveThenUpload/ Unfortunately. useRequestPreSend not fired in the List component, either in uploady. How can I make it fire?

[yoavniran]

hey @savasgok
thats very strange, the useRequestPreSend hook should always be called (as long as the hook is rendered under the Uploady provider)
can you share a reproducing sandbox for me to check?

[savasgok]

I forked the example and put the useRequestPreSend to UploadList function to change the name of file. It's fired but file name remained unchanged

https://codesandbox.io/s/react-uploady-add-and-remove-before-upload-forked-3dc7yg

[yoavniran]

@savasgok I looked at the sandbox you shared and I dont see useRequestPreSend being used anywhere.

[savasgok]

I don't know it's dissapeared. This time I tested useRequestPreSend is there. It does not change the file name. I thought file name is read only.

https://codesandbox.io/s/react-uploady-add-and-remove-before-upload-forked-3dc7yg?file=/src/App.js

[yoavniran]

It is being called -

Two comments:

1. Were you expecting it to be called before the UPLOAD button is clicked? You're using autoUpload={false} so Uploady doesnt start the uploading until you call processPending, which is called from the button in the UploadList component. preSend event happens immediately before the request is sent out.

2. I suggest moving the call to the useRequestPreSend hook to a different, higher component. For example, the UploadList. UploadListItem is more likely to be unmounted or not mounted and you dont need more than one instance of the useRequestPreSend being rendered in your Uploady component tree. It will be called for each upload anyway.

[savasgok]

Yes, it's been called. I solved that. I was mistaken there. But my main problem is still there. I can't change file name before upload in the client.

[yoavniran]

so this is more a JS question than Uploady, but here's the way:

You actually need to create a new File object -

 const f = items[0].file;

      items[0].file = new File(
        [f],
        "my new file name",
        { type: f.type, lastModified: f.lastModified }
      );

I'd still recommend doing this on the server rather than on the client

[savasgok]

Yeah, that worked. Thank you for your help. Much appreciated