I’m wondering if anyone has any advice on how to get this working.
I am after creating a page called ‘additionaldocuments’ for uploading additional documents and images to a case in a case management system that I am developing. I have the id of the case ‘caseid’ passed via a query parameter to the page so that I will be able to keep track of which files are related to which case.
I would like to upload these additional documents to Amazon S3 using an S3 Multi Upload Control and have them uploaded to a subfolder in the bucket named after the caseid.
So essentially the file structure in s3 ideally should be <bucketname>/<caseid>/<filename>
As far as I know, this is done by modifying the Key in the S3 Sign Upload URL properties of the server action. Below is my server action:
It might be staring me in the face, but I cannot seem to be able to get my caseid to be passed to the server action, and so when I check S3, the file structure is just a folder called ‘/’ and the file is in there.
Unlike other server connects, the S3 Multi Upload Control doesn’t have an input in the properties to specify what caseid is after adding it to the $_GET inputs of the server action.
My end goal then would be that I would like to be able to show a list of uploaded files on the additionaldocuments page with links for each uploaded file in the folder that was named after the caseid which again is passed on the query parameter
If anyone had any suggestions on how I could get this to work, I would be extremely grateful!
@Apple, thank you very much for your reply, I gave it a shot by trying url="/api/s3/signupload?caseid=query.currentcase" where query.currentcase should be the caseid passed over from the previous page the user was on.
I’ve tried various combos of url="'/api/s3/signupload?caseid='+query.currentcase" and url="/api/s3/signupload?caseid={{query.currentcase}}" but to no avail.
The last attempt yielded an empty folder with the following name:
I used dmx-bind to be able to use dynamic expressions, and built the expression by hand
I replaced the url with dmx-bind:url, but you could also use the url at the same time (maybe so the URL is preserved in the UI), dmx-bind:url should override url when the page runs
Edit: Fixed something in the code, check again, also put back the url attribute as well
Oh, that’s unfortunate. But, don’t worry, you still have a 2nd chance
You can use server-side rendering instead of client-side rendering, to inject the query.currentcase variable
If you’re using NodeJS, take a look at this bug report of mine where you can copy-paste the syntax:
If you’re using PHP, I’ve never tried it, you can try to click “Server-side binding” in the UI to see the syntax it generates. Test it on regular text (like in a <p> tag) first
@Apple, I am extremely grateful for your advice up to now. You have been more than helpful.
However, as I am a bit of a smooth brain, I don’t quite understand what to do with the information you have provided above regarding the server side rendering.
I appreciate you have dedicated plenty of time to this already, but could I be as annoying as to ask if you could point me in the right direction to if there is further information or a guide on this topic so that I can understand how to implement this?
Because you asked so nicely, I did a video for you. Note I may have made a mistake in the variable names:
S3
Note the variable name on the video may be wrong, I don’t have much experience with the front-end, so I couldn’t remember if it’s “$_GET”, “query” or “querydata” or if there are additional steps needed to access such data
Hi @Apple, you have been extremely helpful. I tried the server-side rendering, however, I think the main issue I started having was that my server connect URL would be ...signupload?caseid='+query.currentcase" and dmxS3Upload was trying to append ?name=... at the end, so it would end up not working out.
What I settled on doing in the end is modifying dmxS3Upload.js (not ideal but now I know what I did) so that instead it reads as &name instead of ?name the line where it says t.open("GET",this.props.url+"?name="+encodeURIComponent(this.file.name)). I did this in two places on the file, and used <div id="s3upload" is="dmx-s3-upload-multi" dmx-bind:url="'/api/s3/signupload?caseid='+query.currentcase" accept="" class="text-center border" url="/api/s3/signupload"> as the code on the page itself.