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
– Salim Djerbouh, Commented Sep 5, 2019 at 0: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
– Vian Ojeda Garcia, Commented Sep 5, 2019 at 1:18
Must be a server configuration issue, the code isn't rejecting files based on size — Salim Djerbouh
– Salim Djerbouh, Commented Sep 5, 2019 at 1:27

Salim Djerbouh · Accepted Answer · 2019-09-05 01:49:54Z

1

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

answered Sep 5, 2019 at 1:49

Salim Djerbouh

11.1k6 gold badges35 silver badges65 bronze badges

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

Collectives™ on Stack Overflow

Javascript how to pass the file path to API for conversion

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related