Javascript how to pass the file path to API for conversion

Question

I am developing a web application that enable users to upload wav file and convert it to mp3. So far I can convert wav to mp3 and save it to the project folder. What I can't find is pass the wav file to api dynamically.

<div class="fileHolder">
  <b-form-file v-model="fields.file" accept=".wav" id="test"></b-form-file>
</div>

wav file to mp3 convert

public Task<HttpResponseMessage> test()
{
  string filename = null;
  if (!Request.Content.IsMimeMultipartContent())
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

  string rootPath = HttpContext.Current.Server.MapPath("~/Uploads");
            var provider = new MultipartFileStreamProvider(rootPath);
   var task = Request.Content.ReadAsMultipartAsync(provider).
                ContinueWith<HttpResponseMessage>(t =>
                {
                    uploadResult r = new uploadResult();
                    if (t.IsCanceled || t.IsFaulted)
                    {
                        Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
                    }
                    foreach (MultipartFileData dataitem in provider.FileData)
                    {
                        try
                        {
                            //Replace / from file name
                            string name = dataitem.Headers.ContentDisposition.FileName.Replace("\"", "");
                            filename = name.Substring(name.LastIndexOf(@"\") + 1, name.Length);

                            //Create New file name using GUID to prevent duplicate file name
                            string newFileName = Guid.NewGuid() + Path.GetExtension(name);
                            string mp3FileName = Guid.NewGuid() + ".mp3";
                            //filename = newFileName;

                            //Move file from current location to target folder.
                            File.Move(dataitem.LocalFileName, Path.Combine(rootPath, newFileName));
                            //WavToMP3(Path.Combine(rootPath,newFileName), Path.Combine(rootPath,mp3FileName));
                            //File.Delete(Path.Combine(rootPath, newFileName));
                            r.fileName = mp3FileName;
                        }
                        catch (Exception ex)
                        {
                            string message = ex.Message;
                        }
                    }
                    r.result = "Ok";
                    return Request.CreateResponse(HttpStatusCode.Created, r);
                });

            return task;
}



public static void WavToMP3(string waveFileName, string mp3Filename, int bitRate = 128)
{
  CheckAddBinPath();
  using (var reader = new AudioFileReader(waveFileName))
  using (var writer = new LameMP3FileWriter(mp3Filename, reader.WaveFormat, bitRate))
  reader.CopyTo(writer);
}

Javascript Code:

function onSubmit() {
    event.preventDefault();
    var file = this.fields.file;
    var fd = new FormData;
    fd.append("file", file);
    axios.post(`https://localhost:44324/api/G/test`, fd , {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(r => {});
}

The new problem is when I upload 5mb file or higher provider.Filedata contains no data. But when the file is small there is data found on the provider Can someone point me in the right direction?

What do you get on the network tab of your browser when you perform the request? — Salim Djerbouh, Sep 05 '19 at 00:59
@CaddyDZ please refer to the updated code and question. The code works fine when I am trying to upload small file but when the file becomes 5mb or higher, `provider.Filedata` is empty — Vian Ojeda Garcia, Sep 05 '19 at 01:18
Must be a server configuration issue, the code isn't rejecting files based on size — Salim Djerbouh, Sep 05 '19 at 01:27
@CaddyDZ what should I look for? can you point me in the right direction? — Vian Ojeda Garcia, Sep 05 '19 at 01:33
@CaddyDZ that solve it. Please post an answer so I can accept it. — Vian Ojeda Garcia, Sep 05 '19 at 01:46

score 1 · Accepted Answer · answered Sep 05 '19 at 01:49

This is not a JS problem but server setting preventing large files from being uploaded

So in your web.config of your ASP.NET or .NET Core

Change the default 4MB limit 4096 to 20MB for example

<configuration>
  <system.web>
    <httpRuntime maxRequestLength="20480" />
  </system.web>
</configuration>

Credits to Eric Rosenberger SO answer

Javascript how to pass the file path to API for conversion

1 Answers1