Renaming the uploaded file through file uploader Answered
Hey everyone,
I'm very new to memberstack and love it! 🙂
But I currently got stuck on thing that I feel it should be quite easy.
I followed the instructions here and developed a file uploader. It works just fine, and now I want to modify the name of the file that gets uploaded (with the user_id + timestamp ideally), but whatever I try I won't manage.
Do you have any idea on how should I change the following code in order to modify the name of the file that gets uploaded?
Thank you in advance for any help! 🙂
My file input is defined as follows:
<input type="file" name="fileToUpload" id="fileToUpload">
And my code in the body as follows:
<!-- :blue_heart: MEMBERSCRIPT #38 v0.1 :blue_heart: FORM FILE UPLOADER --> <script> const forms = document.querySelectorAll('form[ms-code-file-upload="form"]'); forms.forEach((form) => { form.setAttribute('enctype', 'multipart/form-data'); const uploadInputs = form.querySelectorAll('[ms-code-file-upload-input]'); uploadInputs.forEach((uploadInput) => { const inputName = uploadInput.getAttribute('ms-code-file-upload-input'); //const inputName = uploadInput.getAttribute('data-ms-member'); fileInput.setAttribute('type', 'file'); fileInput.setAttribute('name', inputName); fileInput.setAttribute('id', inputName); //fileInput.required = true; // delete this line to make the input optional uploadInput.appendChild(fileInput); }); }); </script>
Comments
12 comments
Hi Luc,
To modify the name of the file that gets uploaded, you can use JavaScript to intercept the file selection event and change the file name before uploading it. Here's how you can modify your code to achieve this:
html <!-- :blue_heart: MEMBERSCRIPT #38 v0.1 :blue_heart: FORM FILE UPLOADER --> <script> const forms = document.querySelectorAll('form[ms-code-file-upload="form"]'); forms.forEach((form) => { form.setAttribute('enctype', 'multipart/form-data'); const uploadInputs = form.querySelectorAll('[ms-code-file-upload-input]'); uploadInputs.forEach((uploadInput) => { const inputName = uploadInput.getAttribute('ms-code-file-upload-input'); const fileInput = document.createElement('input'); fileInput.setAttribute('type', 'file'); fileInput.setAttribute('name', inputName); fileInput.setAttribute('id', inputName); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; const userId = 'user_id'; // Replace 'user_id' with the actual user ID const timestamp = new Date().getTime(); const newName = `${userId}_${timestamp}_${file.name}`; fileInput.setAttribute('name', newName); }); uploadInput.appendChild(fileInput); }); }); </script>Hmm, I'm not sure if you're able to change the name using that script. From what I see it's changing the name of the input, not the name of the file... For security reasons, browsers cannot handle file name change. The name in File object is a read-only variable in browsers and any manipulation should be done in the server 🤔
Raquel Lopez indeed the name didn't change (Chukwudi Onyekwere)
I noticed though that I can change the name in make.com at the step of writing the file in google drive.
The piece I am missing though now is how to pass the member id (which I know how to retrieve I think) to the webhook in make.com.
The easiest will be to insert an input that has the ID with the attribute data-ms-member=id into the form you're using to submit your information to Make.
When you send a form it will send all the input fields as data in Make.
yes. Thank you.
Do you know by chance how do I edit the parameters circled in red in the picture within make.com? I researched but I couldn't find it! There I would have to add also the member id..
somehow i don't even see the parameters in the same way they are shown in the video.. Here they are not colored in red (full coloro) and cannot select them when searching for them..
Uhm.. You need to keep actively testing to receive new information and edit accordingly.
You have to click edit scenario, and then click Run Once. Send your form in Webflow with new data, and the scenario will receive all the data. After that your attributes should be red colored and editable.
umm i did that and the file got written in google drive, but the map is still not colored..
But isn't it editable? delete the attribute and add it again with the new response 😅
I managed to make the webhook identify the data structure! Thanks 😀 I don't see the member id, but let's see if i manage to pass that as well! 🙂
I don't seem to manage to pass the member id.. I created an hidden input with the attribute data-ms-member="id" and appended to the code the following definition (highlighted), but maybe I m not doing it right. Do you have any tips onthis? I feel I m very close! 😀
You just had to add the input inside the form element in webflow and add the attribute. You didn't had to add anything with JS 😅
Yup, every input thats inside a <form> element, when using the submit method it will send all the values from the input to your action URL, that I think this action should be your webhook URL.
umm it doesn't really work..
These are the data structure the webhook receives.. but I can't figure now how to pass additional data (the member id) or change the data.
But I managed!! 🙂
Thank you for the help Raquel Lopez and Chukwudi Onyekwere! 🙂
Glad you've resolved it Luca De Angelis . Many thanks Raquel Lopez for the help 🫡
Please sign in to leave a comment.