How to name a audio file when saving into server with POST

Using Django
1

I’ve being developing a solution for my webpage with Django and javascript, it’s a record button so that the user can send feedback and I can store it into the server.

The plan is putting a text input where the user can introduce its name and a file is created with that name. This is my code by now. Can anyone help me with this?

Python views.py

def voice_request(request):
    f = open('./Grabaciones/file.wav', 'wb')
    f.write(request.body)
    f.close()
    return HttpResponse('audio received')

Javascript part

function sendData(data) {
  let csrftoken = getCookie('csrftoken');
  let response=fetch("/salud/voice_request/", {
  method: "post",
  body: data,
  headers: { "X-CSRFToken": csrftoken },
  })
}
2

If what you’re sending is being submitted through the POST as a file, then you should be able to handle this through a normal Django form. Define a field for the name and a field for the file being uploaded, then save that file with the name that’s in the field (hopefully cleaned and filtered to prevent problems - saving files to user-submitted names is a security-disaster-in-the-making).

1 Like
3

Can you send me to some documentation about how to do that? Isn’t it a easier way? Like attaching in to the same POST. Thank you!

4

That’s what I’m suggesting. You define the fields that you want the user to manually enter as a Django form. You then also define the data-to-be-uploaded as a FileField on that same form. Your submit button then attaches that data as the file field data within the form and submits it as a form to Django.

On the Django side, you then have both the data and the file within your form object. You can then save that file however you wish.

For information on how to do this from the Django side, see File Uploads. (Just be very very careful as to what you accept as the file name. In fact, I would recommend not using any user-submitted data as the actual file name. At most, I would save the data with a system-generated file name and just use the user-submitted entry as a “reference name” associated with the “real” file name.)

Ken

5

Okay, but I don’t really know how to do the part in which I attach the file to the title. The title is got via HTML text field and the Audio File is blob data managed by javascript. How can I send it together? Some code maybe? :slight_smile:

6

From the aforementioned documentation on File Uploads:

  • Note that request.FILES will only contain data if the request method was POST and the <form> that posted the request has the attribute enctype="multipart/form-data" . Otherwise, request.FILES will be empty.

That’s what Django is expecting to receive.

If you’re not familiar with POST data formats, you would find it quite educational to put together the samples on that page as a small test app (with an appropriate form and view) and run it. Then monitor the traffic being generated as the form submission through your browser’s developer tools under the network tab. That’ll show you what you need to generate from the JavaScript.

The specific JavaScript implementation is going to greatly depend upon what framework(s) you’re building this on. I’m sure just about every framework is going to provide a solution in a slightly different manner. So you’ll need to investigate this in terms of what you’re using.

Ken

1 Like
7

Can I ask, did you solve this? I am working on a similar solution and would love to see how you did it. The user is creating an audio file via. a javascript recorder, and I want to know how to attach it correctly to my Django form before doing the POST. I am using JQuery ajax.