Accessing URL from App Connect S3 Upload for Preview prior to Upload

Server Side Components
#1

Using the App Connect S3 Upload, does anyone know if it’s possible to get the URL after the select() method is called (from Browse button) for the purpose of a file preview prior to Upload? (I’m able to get the name via “file.name” but can’t find a way to get the path for a preview)

#2

Hi there @jamesmazzu… if you are uploading it to a single bucket, can you just append the bucket url in front of the name?

I do this in a form:

‘files.myapp.com/‘+file.name

Hope that helps!
Antony.

#3

I will be uploading to a bucket, but the idea is to provide a preview of the file PRIOR to uploading, after the user has selected the file. Therefore, appending the bucket URL won’t help because the file isn’t uploaded yet.

What I need for the App Connect S3 Upload would be something similar to how the custom_file_input provides “file.dataUrl” to get the local URL that can be used for a preview. Tried file.dataUrl, file.path, etc… but can’t get anything to work yet… “file.name” works to get the name but that isn’t enough for a preview.

#4

You can use the dataUrl from a standard file input as a dynamic source of an image:

<form id="form1">
    <img dmx-bind:src="input1.file.dataUrl">
    <div class="form-group mb-3">
        <label for="input1" class="form-label">Image upload</label>
        <input type="file" class="form-control" id="input1" name="input1" aria-describedby="input1_help">
        <small id="input1_help" class="form-text text-muted">Select here your image for upload.</small>
    </div>
</form>

Screenshot 2023-06-03 at 11.36.47 AM
Screenshot 2023-06-03 at 11.36.47 AM1002×1566 96.4 KB

#5

thanks, however the goal here is to use App Connect S3 Upload to eventually get the file to the S3 bucket. App Connect S3 Upload provides two functions, one for selecting the file, and another for uploading it. I simply need the file’s info after calling “select()” in order to display it in a preview before calling the “upload()” function that gets it to the bucket.

#6

Okay. I always just upload the file to the app server, perform any manipulation needed, and then upload to s3 from server. I often have cropper in the mix as well.

#7

Just tried out the S3 client component. Even though it is not shown in the UI data bindings, the same file.dataUrl option is available for the preview, at least for a single image.

s3upload1.file.dataUrl

For multiple files, it’s just an array of files, so all available there too.

#8

Yes, looks like that worked, thanks for your help!

1 Like