Support #8707

How to upload a file with javascript?

Added by Jocelyn Martin over 1 year ago. Updated over 1 year ago.

Target version:
Start date:
Due date:
% Done:


Estimated time:


Hello everybody,

WFileUpload allow to upload files, it is working fine for me and it is nice.
But now I want to upload some sounds recorded by the microphones too.
I don't think this is possible with WFileUpload.

So I try to do it in html, javascript, php by following some exemples on the web.
I inject html code like this:

wContainerWidgetObject->addNew<Wt::WText>("<html code>", Wt::TextFormat::UnsafeXHTML);

and I add the .js and .php files.

No matter of how I do it with XMLHttpRequest (like here or with the most common way with ajax (like here, I always come to a point where I have no error on the console, everything seems to be ok but I notice that the file is not uploaded on the server.
There is something that forbid to do it? There is something to set the wt config xml file for that?
I already tried to set big number for "max-memory-request-size", "max-request-size" and "max-formdata-size", but I still have the problem. (and again with WFileUpload it is working)

(For the ajax way I even try to modify the jquery.min.js to have this function, after that the function was found but still no file is uploaded)

Thank you for your help,
Wt is really nice in general.


Updated by Korneel Dumon over 1 year ago


to upload a file, the easiest way is to create a WResource. When you send data to the url of the resource, it will be available to you in WResource::handleRequest(), at which point you can save it to a file. This is also sort of how WFileUpload works internally.

I guess your way of injecting JS will work, but Wt actually has some facilities for this, have a look at:

  • WApplication::require()
  • WApplication::doJavaScript()
  • WWidget::doJavaScript()
  • Wt::JSignal / Wt::JSlot

I'm not sure which of these is most useful to you, it depends a bit on your design.


Updated by Jocelyn Martin over 1 year ago

I did that according to your answer.

  // Javascript for audio recording

  // Button to start the recording
  auto* startRecordBtn = changeLanguageTemplate->addNew<Wt::WPushButton>("start record");
  // Button to stop the recording
  auto* stopRecordBtn = changeLanguageTemplate->addNew<Wt::WPushButton>("stop record");

  startRecordBtn->clicked().connect([=] {
    startRecordBtn->setEnabled(false); // FIXME: this should be done only if "navigator.mediaDevices.getUserMedia(constraints)" succeeded
    stopRecordBtn->setEnabled(true); // FIXME: this should be done only if "navigator.mediaDevices.getUserMedia(constraints)" succeeded
          "console.log(\"startRecordBtn clicked\");"
          "var constraints = { audio: true, video:false }                                 \n"
          "navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {       \n"
          "  audioContext = new AudioContext();                                           \n"
          "  gumStream = stream;                                                          \n"
          "  input = audioContext.createMediaStreamSource(stream);                        \n"
          "  rec = new Recorder(input,{numChannels:1})                                    \n"
          "  rec.record()                                                                 \n"
          "  console.log(\"Recording started\");                                          \n"
          "}).catch(function(err) {                                                       \n"
          "  console.log(\"Error: \" + err);                                              \n"

  stopRecordBtn->clicked().connect([=] {
          "console.log(\"stopButton clicked\");                                           \n"
          "//tell the recorder to stop the recording                                      \n"
          "rec.stop();                                                                    \n"
          "                                                                               \n"
          "//stop microphone access                                                       \n"
          "gumStream.getAudioTracks()[0].stop();                                          \n"
          "                                                                               \n"
          "//create the wav blob and pass it on to createDownloadLink                     \n"
          "rec.exportWAV(function (blob) {                                                \n"
          "  console.log(\"afer export WAV: \" + blob);                                   \n"

But I still don't see how to have a WResource pointing to the blob object that is representing the WAV. (cf last lines of this code example)
If I succeed to do it I am ok to propose a merge request to add a widget for audio recording on Wt and to add an example project that uses it like you are used to do it.


Updated by Korneel Dumon over 1 year ago


seems like you get the data in the handler of exportWAV. From this handler, I would make a POST request with the blob to the url of your WResource.


Updated by Jocelyn Martin over 1 year ago

Thanks for the answer I don't know how to do that exactly so I moved that code to my apache server. I create a file with php that calls a wt resource with the name of the new file. It works well but yes make a post request with a WResource directly inside is the good way to do it.

Also available in: Atom PDF