Question:

Fix my form calling the wrong Django view error

Problem:

The flow of my app is as follows: A file is submitted on the transcribe.html page first which then redirects to the transcibe-complete.html page where the user can click to begin transcription.

Why is the 'transcribeSubmit' view being called instead of the 'initiate_transcription' view when the user clicks the 'click to transcribe' button on the 'initiate_transcription' page?

Each page has their own JS file to ensure that forms are submitted separately.

HTML: (transcribe.html):

{% csrf_token %}

<label for="transcribe-file" class="transcribe-file-label">Choose audio/video file</label>

<button class="upload" id="transcribe-submit" type="submit" >Submit</button>

</form>

(transcribe-complete):

{% csrf_token %}

<option value="detect">Detect language</option>

<option value="zh">Chinese</option>

<option value="en">English</option>

<option value="es">Spanish</option>

<option value="de">German</option>

<option value="jp">Japanese</option>

<option value="ko">Korean</option>

<option value="ru">Russian</option>

<option value="pt">Portugese</option>

</select>

</div>

<button id="transcribe-button" type="submit">Click to Transcribe</button>

</div>

</form>

JS:

const form = document.querySelector('form');

form.addeventlistener('submit', function (event) {

event.preventdefault();

const formdata = new formdata(form);

const xhr = new xmlhttprequest();

xhr.open('post', form.getattribute('action'), true);

xhr.onreadystatechange = function () {

console.log("ready state: ", xhr.readystate);

console.log("status: ", xhr.status);

}

xhr.responsetype = 'blob';

xhr.send(formdata);

});

views.py:

@csrf_protect

def transcribeSubmit(request):

if request.method == 'POST':

form = UploadFileForm(request.POST, request.FILES)

if form.is_valid():

uploaded_file = request.FILES['file']

fs = FileSystemStorage()

filename = fs.save(uploaded_file.name, uploaded_file)

request.session['uploaded_file_name'] = filename

request.session['uploaded_file_path'] = fs.path(filename)

#transcribe_file(uploaded_file)

#return redirect(reverse('proofreadFile'))

return render(request, 'transcribe/transcribe-complete.html', {"form": form})

else:

form = UploadFileForm()

return render(request, 'transcribe/transcribe.html', {"form": form})

@csrf_protect

def initiate_transcription(request):

if request.method == 'POST':

# get the file's name and path from the session

file_name = request.session.get('uploaded_file_name')

file_path = request.session.get('uploaded_file_path')

if file_name and file_path:

with open(file_path, 'rb') as f:

transcribe_file(file_name, f)

return JsonResponse({'status': 'success'})

else:

return JsonResponse({'status': 'error', 'error': 'No file uploaded'})

return JsonResponse({'status': 'error', 'error': 'Invalid request'})

transcribe/urls.py:

from django.urls import path

from . import views

urlpatterns = [

path("", views.transcribeSubmit, name = "transcribeSubmit"),

path("", views.initiate_transcription, name = "initiate_transcription"),

]

mysite/urls.py:

from django.contrib import admin

from django.urls import include, path

from translator import views

urlpatterns = [

path('', include('homepage.urls')),#redirects to translator/

path('translator/', include('translator.urls')),

path('translator/translator_upload/', include('translator_upload.urls')),

path('proofreader/', include('proofreader.urls')),

path('proofreader/proofreader_upload/', include('proofreader_upload.urls')),

path('transcribe/', include('transcribe.urls')),

path('admin/', admin.site.urls),

]

Solution:

The problem is in your url patterns. You are matching two empty paths to two different views. Django will simply match the first path, and call its view. You need to give each one a different path name.

urlpatterns = [

path("transcribe/", views.transcribeSubmit, name = "transcribeSubmit"),

path("init-transcription/", views.initiate_transcription, name = "initiate_transcription"),

]

>Testing react components using Hooks and Mocks

>Use Firebase Realtime Database with ASP.NET MVC App

>Use of Singletons in .NET Core in AWS Lambda

>What are common syntax errors and exceptions in Python

>What is data binding in Angular?