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

Question

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;
        }
    }

Instead of File.Create(path);, try using File.OpenWrite(path); — Andy
– Andy, Commented Nov 12, 2020 at 19:57
still Getting the same error , and still able to save if one file is added to the List — hawlk5
– hawlk5, Commented Nov 12, 2020 at 20:40

sharpist · Accepted Answer · 2020-11-22 07:02:41Z

5

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

answered Nov 22, 2020 at 7:02

sharpist

512 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aidangig Over a year ago

Maybe nice to provide a code sample to justify your claim?

Adlorem · Accepted Answer · 2022-05-23 12:47:24Z

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);
            }                 
        }

Greg Gum · Accepted Answer · 2020-11-13 03:09:55Z

0

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);
        }
    }
}

answered Nov 13, 2020 at 3:09

Greg Gum

38.8k46 gold badges183 silver badges269 bronze badges

2 Comments

hawlk5 Over a year ago

the assumption from what i have deduced is that when you upload multiple files at the same time, its actually working . But when you add one file at a time to a list thats when its bringing the error . Its like the Lists are different some house.

Greg Gum Over a year ago

did you try setting a breakpoint in the server code and stepping through it?

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related