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, Nov 12 '20 at 19:57
still Getting the same error , and still able to save if one file is added to the List — hawlk5, Nov 12 '20 at 20:40

score 4 · Answer 1 · answered Nov 22 '20 at 07:02

4

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 '20 at 07:02

sharpist

41
2

1

Maybe nice to provide a code sample to justify your claim? – aidangig Sep 23 '22 at 17:43

score 1 · Answer 2 · answered May 23 '22 at 12:47

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

score 0 · Answer 3 · answered Nov 13 '20 at 03:09

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

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. — hawlk5, Nov 13 '20 at 12:26
did you try setting a breakpoint in the server code and stepping through it? — Greg Gum, Nov 13 '20 at 13:49

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

3 Answers3