We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldDeskWe are launching BoldDesk on Product Hunt soon. Learn more & follow us.
I get file type not allowed when I upload a file from android phone which its extension is a jpg. but works well on iPhone which gives a jpeg. but jpg is part of my allowed extensions.
Also it never shows anything when I decide to upload one photo or I select two. it only shows and uploads when I select 3 or more photos.
<SfUploader ID="UploadFiles" AllowMultiple="true" AllowedExtensions=".jpeg, jpg, .png, .gif">
<UploaderEvents FileSelected="@FileSelectedHandler"></UploaderEvents>
<UploaderAsyncSettings SaveUrl="api/FileUpload/Save" RemoveUrl="api/FileUpload/Remove"></UploaderAsyncSettings>
</SfUploader>
private void FileSelectedHandler(SelectedEventArgs args)
{
addItem.ItemImage1 = args.FilesData[0].Name;
addItem.ItemImage2 = args.FilesData[1].Name;
addItem.ItemImage3 = args.FilesData[2].Name;
}
The above is the only code I have for the file upload component in the razor file.
To upload jpg file, in AllowedExtensions you need to use .jpg instead of jpg.
<SfUploader ID="UploadFiles" AllowMultiple="true" AllowedExtensions=".jpeg, .jpg, .png, .gif"> <UploaderEvents FileSelected="@FileSelectedHandler"></UploaderEvents> <UploaderAsyncSettings SaveUrl="api/FileUpload/Save" RemoveUrl="api/FileUpload/Remove"></UploaderAsyncSettings> </SfUploader> |
i don't know how i couldn't see that there wasn't a period there. thank you.
but why don't my photos upload if one or two is only selected?
We would appreciate your assistance in troubleshooting the issue you're experiencing with the file upload component. In order to better understand the problem and provide a solution, could you please provide the following information:
Is the file upload component rendered within any other component, or is it alone?
An issue reproducing runnable sample.
Detailed steps to replicate the issue.
A video illustration of the issue, if possible.
It's in an editform which is in a sfdialogue
It doesn't give or show any error, it just doesn't upload any file selected if the total number of file selected is not equivalent to the number of array in the File selected uploader event.
private void FileSelectedHandler(SelectedEventArgs args)
{
addItem.ItemImage1 = args.FilesData[0].Name;
addItem.ItemImage2 = args.FilesData[1].Name;
addItem.ItemImage3 = args.FilesData[2].Name;
}
If I want to upload just one or two images it doesn't upload,
It appears as if they weren't even selected.
Find video attached in zip
You can send the form data to the controller in the Blazor by creating a MultipartFormDataContent object. The form fields (EmpID and Message) are added as StringContent to the formData object. The file content is read into a StreamContent object, and both the StreamContent and the file name are added to the formData object. The formData object is then sent as part of a POST request to the server's endpoint using HttpClient. In the controller, the PostFormData action method receives the form data and file as parameters for further processing.
[Index.razor]
|
@page "/" @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.Buttons @using System.Net.Http @using System.IO; @using System.ComponentModel.DataAnnotations @using Microsoft.AspNetCore.Components.Forms @using System.Net.Http.Headers; @inject HttpClient httpClient @inject HttpClient Http <EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <div class="form-group"> <SfTextBox @bind-Value="@employee.EmpID" Placeholder="Email ID"></SfTextBox> <ValidationMessage For="() => employee.EmpID" /> </div> <div class="form-group"> <SfTextBox @bind-Value="@employee.Message" Multiline="true" Placeholder="Message"></SfTextBox> <ValidationMessage For="() => employee.Message" /> </div> <div class="form-group"> <SfUploader @ref="UploadObj" AutoUpload="true" AllowMultiple="true" ID="UploadFiles"> <UploaderEvents ValueChange="@OnChange"></UploaderEvents> </SfUploader> <ValidationMessage For="() => employee.Files" /> </div> <button type="submit" class="btn btn-primary">Send Mail</button> </EditForm> @code { SfUploader UploadObj; public class Employee { [Required(ErrorMessage = "Please enter your name")] public string EmpID { get; set; } = temp@mail.com; [Required(ErrorMessage = "Please enter your Message")] public string Message { get; set; } = "Hello"; [Required(ErrorMessage = "Please upload at least one file")] public List<FileData> Files { get; set; } = new List<FileData>(); } public Employee employee = new Employee(); private async Task OnChange(UploadChangeEventArgs args) { foreach (var file in args.Files) { MemoryStream memoryStream = new MemoryStream(); using var fileStream = file.File.OpenReadStream(long.MaxValue); await fileStream.CopyToAsync(memoryStream); employee.Files.Add(new FileData { Name = file.FileInfo.Name, ContentType = file.File.ContentType, Content = memoryStream.ToArray() }); } } public class FileData { public string Name { get; set; } public string ContentType { get; set; } public byte[] Content { get; set; } } public async Task HandleValidSubmit() { if (employee.Files != null && employee.Files.Count > 0) { using var httpClient = new HttpClient(); httpClient.BaseAddress = new Uri(https://localhost:7212/); var formData = new MultipartFormDataContent(); formData.Add(new StringContent(employee.EmpID), "EmpID"); formData.Add(new StringContent(employee.Message), "Message"); foreach (var fileData in employee.Files) { var streamContent = new StreamContent(new MemoryStream(fileData.Content)); streamContent.Headers.Add("Content-Disposition", $"form-data; name=\"files\"; filename=\"{fileData.Name}\""); streamContent.Headers.ContentType = new MediaTypeHeaderValue(fileData.ContentType); formData.Add(streamContent, "files"); } var response = await httpClient.PostAsync("api/SampleData", formData); if (response.IsSuccessStatusCode) { // Handle success } else { // Handle failure } } } } |
This is what I have apparently
SfUploader ID="UploadFiles" AllowMultiple="true" AllowedExtensions=".jpeg, jpg, .png, .gif">
<UploaderEvents FileSelected="@FileSelectedHandler"></UploaderEvents>
<UploaderAsyncSettings SaveUrl="api/FileUpload/Save" RemoveUrl="api/FileUpload/Remove"></UploaderAsyncSettings>
</SfUploader>
And what I simply want is to give each item uploaded name to a parameter addItem.ItemImage
Hence:
private void FileSelectedHandler(SelectedEventArgs args)
{
addItem.ItemImage1 = args.FilesData[0].Name;
addItem.ItemImage2 = args.FilesData[1].Name;
addItem.ItemImage3 = args.FilesData[2].Name;
}
It works well except that it only uploads the files/images only if 3 are selected but doesn’t upload at all if one or two are selected.
How can I upload 1 - 3 images and assign the name of the files/images to
addItem.ItemImage1
addItem.ItemImage2
And
addItem.ItemImage3
Hello Boot Dat,
To assist you more effectively, we request that you provide the following additional details:
This information will be very helpful in helping us resolve your issue as quickly and efficiently as possible.
Regards,
Udhaya Kumar D
