File Upload with Additional User Metadata

Radzen Studio Blazor WebAssembly
1

Is there a way to invoke RadzenUpload in manual mode such that the user can select a file, populate additional form metadata, and handle submit of the byte[] together with additional form-supplied metadata to the server?

The OnChange event allows us to inspect a FileList, but we are not able to get any byte[] data of the image staged to be uploaded. (The image that is immediately embedded in the webpage) If we were able to get at that byte[] data, then we could add-in additional metadata besides filename and filesize when we upload the image back to the server.

Also, when we upload a file a preview is generated and embedded in the web page in an img tag with a src=url. Is that just a thumbnail image of the file, or the actual file that was about to be uploaded to the server? Is there anyway to programmatically get the url referenced in the img src="### this right here###" tag embedded in the page without having to walk the DOM tree?

2

You can pass additional parameter to the upload. Check our demo for reference:

3

Hello,
Do you have a more complete example of how to POST a C# object with embedded image data to the server with that parameter with auto=false?

Here's what we are doing right now, no url specified, we just want to be able to grab the image bytes, collect some more information, and then post this all the server when we press a submit button:

            <RadzenUpload @ref="_UploadControl" Multiple="false" Accept="image/*" Auto="false"
                           Change=@(args => OnChange(args, "Images only upload"))
                          Progress=@(args => OnProgress(args, "Images only upload")) />

So after the user presses the initial "Choose" button, the Razden control will display a thumbnail image right below the choose button:

img src="blob:https://localhost:44308/393adab8-91c2-4627-bc75-2e83b4dac42b" width="50px" onerror="this.style.display='none';"

Question #1: Is this newly uploaded image embedded in the webpage a full size image, or just a thumbnail version at this point?
Question #2: Is there a way to programmatically get at this embeddedImageUrl from the _UploadControl ref that we defined earlier so that we can pull the full sized image, get the bytes, and attach other information? Something akin to:

  WebClient wc = new WebClient();
  Image.ImageContent = wc.DownloadData(_UploadControl.embeddedImageUrl);  // Get image byte[]
 
   if (Image.ImageContent.Length < 20 * 1024 * 1024)
        {

// Allow uploading if image is less than 20 megs.
Image.Field1 = // grab field 1
Image.Field2 = // grab field 2

// Then we will take care of posting the Image object (Metadata and byte[]) to the server
}

.

Now, the example you mentioned seemed to be a reverse-thinking way of doing it. This would require the user to first collect all the image meta-data (Field1, Field2) and then pack that into the Image object, and then somehow associate that Image object to the url/{1}. Question #3: Do you have a complete example of how to populate a parameterized url somewhere? Seems to me we might have to flatten out or marshal our Image object to a text string and pack it into that parameter {1}? As soon as we push the upload button, then the Image along with this parameterized data all get sent to the server all at the same time, there is no way to intercept the image size before upload and impose limits.

Thanks in Advance!