CODEWITHSUNDEEP
c#blazorblazorinputfile
hawlk5
hawlk5

Reputation: 81

There is no file with ID 1. The file list may have changed Blazor

When I try to upload files from a list I get this error

"Error: There is no file with ID 1. The file list may have changed"

Its working when I attach one file but, when the list has more than one file, I get the error

The phone Im using to send is

calling function

            foreach (var item in fileList)
            {
                var Enow = item.GetMultipleFiles();
                foreach (var _item in Enow)
                {
                    output = await _IfileUpload.Upload(_item, NewGuid.ToString());
                }
            }

called function

    public async Task<string> Upload(IBrowserFile entry, string UploadGuid)
    {
        try
        {
            var path = Path.Combine(Directory.GetCurrentDirectory(), "Uploads/" + UploadGuid, entry.Name);
            var _path = Path.Combine(Directory.GetCurrentDirectory(), "Uploads/" + UploadGuid);
            if (!Directory.Exists(_path))
            {
                System.IO.Directory.CreateDirectory(_path);
            }

            Stream stream = entry.OpenReadStream();
            FileStream fs = File.Create(path);
            await stream.CopyToAsync(fs);
            stream.Close();
            fs.Close();

            return path;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

Upvotes: 8

Views: 3307

Answers (3)

Adlorem
Adlorem

Reputation: 1507

I ran into similar problem and the solution was to create image data list that is populated each time new file is added from browser. In this case you can have proper grasp on data

   private List<byte[]> _imageData = new List<byte[]>();

   private void UploadFiles(InputFileChangeEventArgs e)
        {
            foreach (var file in e.GetMultipleFiles())
            {
                _files.Add(file);
                _imageData.Add(GetImageBytes(file).Result);
        }
    }    


    private async Task<byte[]> GetImageBytes(IBrowserFile file)
    {
        var path = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString());
        await using var fileStream = new FileStream(path, FileMode.Create);
        await file.OpenReadStream(file.Size).CopyToAsync(fileStream);
        var bytes = new byte[file.Size];
        fileStream.Position = 0;
        await fileStream.ReadAsync(bytes);
        fileStream.Close();
        File.Delete(path);
        return bytes;
    }

And finally

        if (_imageData != null && _imageData.Count() > 0)
        {
            foreach (var photo in _imageData)
            {
                var result = await _uploadService.UploadImage(photo);
            }                 
        }

Upvotes: 1

sharpist
sharpist

Reputation: 51

BlazorInputFile results in error: "There is no file with ID 1". On re-add new files all previously created objects belonging to previous files aren't saved. Meantime the index starts with unsaved objects that no longer exist. Saving files at each selection step gives an correct index. The Chrome inside debugger indicates a problem in inputfile.js

Upvotes: 5

Greg Gum
Greg Gum

Reputation: 37895

I would try this sample from the [docs][1]

<h3>Upload PNG images</h3>

<p>
    <InputFile OnChange="@OnInputFileChange" multiple />
</p>

@if (imageDataUrls.Count > 0)
{
    <h4>Images</h4>

    <div class="card" style="width:30rem;">
        <div class="card-body">
            @foreach (var imageDataUrl in imageDataUrls)
            {
                <img class="rounded m-1" src="@imageDataUrl" />
            }
        </div>
    </div>
}

@code {
    IList<string> imageDataUrls = new List<string>();

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        var maxAllowedFiles = 3;
        var format = "image/png";

        foreach (var imageFile in e.GetMultipleFiles(maxAllowedFiles))
        {
            var resizedImageFile = await imageFile.RequestImageFileAsync(format, 
                100, 100);
            var buffer = new byte[resizedImageFile.Size];
            await resizedImageFile.OpenReadStream().ReadAsync(buffer);
            var imageDataUrl = 
                $"data:{format};base64,{Convert.ToBase64String(buffer)}";
            imageDataUrls.Add(imageDataUrl);
        }
    }
}

Upvotes: 0

Related Questions