Witajcie,
Piszę apkę na Django do konwertowania plików PDF. Nie mogę sobie poradzić z jednym zagadnieniem, może ktoś byłby w stanie rzucić okiem i sprawdzić co robię źle? Mogę zaimportować ile chce plików PDF, wszystkie trafiają do bazy Postgresql, każdy plik ma przypisany numer uuid, form tag przez który importuje mam zabezpieczony tokenem CSRF w głównym template 'index.html' i z niego uruchamiam plik Javascriptu.
<form class="file-selector">
{% csrf_token %}
<div id="uploadContainer">
<label for="fileInput" id="selectButton">Click here to convert PDF</label>
<input type="file" id="fileInput" style="display: none;" multiple>
</div>
<div id="uploadStatusContainer"></div>
<script defer src="{% static 'converter/javascript/import.js' %}"></script>
</form>
Jeśli proces importu się uda to pojawia się lista plików w tym samym oknie, każda pozycja zawiera nazwę pliku i przycisk.
Zamysł jest taki, żeby po kliknięciu w przycisk apka przekierowała na kolejny zdefiniowany template 'document_preview.html', który pokaże co ten plik zawiera.
Jeśli wewnątrz kodu Javascript za tym ifem wsadzę na sztywno deklaracje zmiennej 'uuid' i 'window.location.href' to przekierowanie działa, ale użytkownik traci możliwość wybrania, który plik chce podejrzeć po prostu otwiera pierwszy zaimportowany z kolejki.
if (data.success) {
updateImportedFilesList(data.documents);
const uuid = data.id_uuid;
console.log('Redirecting to:', `${window.location.origin}/document/${uuid}/`);
window.location.href = `${window.location.origin}/document/${uuid}/`;
}
Efekt wygląda tak, informacje o pliku się pokazują, adres URL jest prawidłowy czyli local/document/uuid
Ale jak próbuje wywołać to z poziomu funkcji updateImportedFilesList(documents) gdy otrzymam już listę plików po imporcie, wybiorę plik i kliknę w przycisk uruchamiając funkcje singleConvert(id_uuid) to się wysypuje ... Nie czaje o co chodzi bo uuid jak i token są prawidłowe do samego końca, dziwne jest to że adres URL zmienia się na local/token_csrf zamiast na local/document/uuid
Zastanawia mnie error 'Broken pipe from ('127.0.0.1', 65459)' w logach konsoli, wygląda jakby przerwał sesje po wywołaniu singleConvert(id_uuid), aplikacja odświeża główny template 'index.html' i chyba tworzy nową sesje bo generuje się kolejny token.
CSRF Token: Uly4w45VrN8TsPkCxCUokVvXPbSCMXEdbGg3yR4bufgWopVtRWzbDAKismYPtK0v
[02/Jan/2024 11:00:11] "GET / HTTP/1.1" 200 6064
[02/Jan/2024 11:00:11] "GET /static/converter/javascript/import.js HTTP/1.1" 304 0
Database UUID: 583bbf5c-625e-4e58-a6fa-b65c0721e183
Database UUID: 332fdc49-cf76-4332-8e24-ba57f77b1b33
Database UUID: c6b0103c-78f0-47b2-be57-f4fe4f04ac05
Database UUID: 36652700-4ba7-45a5-908d-01194735fbc0
Document Details: [{'success': True, 'file_name': '6668036303.pdf', 'uuid': '583bbf5c-625e-4e58-a6fa-b65c0721e183'}, {'success': True, 'file_name': '6671650937.pdf', 'uuid': '332fdc49-cf76-4332-8e24-ba57f77b1b33'}, {'success': True, 'file_name': '6675374903.pdf', 'uuid': 'c6b0103c-78f0-47b2-be57-f4fe4f04ac05'}, {'success': True, 'file_name': '6676040904.pdf', 'uuid': '36652700-4ba7-45a5-908d-01194735fbc0'}]
[02/Jan/2024 11:00:28] "POST /document_upload/ HTTP/1.1" 200 475
[02/Jan/2024 11:00:29,144] - Broken pipe from ('127.0.0.1', 65459)
CSRF Token: xWU0QEJVncfZuIdlyjuvtzyvY2mr4EopOhCZSrIbqEn2qiOcSD9iMeNQBdsELrKH
[02/Jan/2024 11:01:38] "GET /?csrfmiddlewaretoken=Uly4w45VrN8TsPkCxCUokVvXPbSCMXEdbGg3yR4bufgWopVtRWzbDAKismYPtK0v HTTP/1.1" 200 6064
Kod Javascript do wglądu, z góry dzięki za pomoc!
function singleConvert(id_uuid) {
if (id_uuid) {
console.log('Redirecting to:', `${window.location.origin}/document/${id_uuid}/`);
window.location.href = `${window.location.origin}/document/${id_uuid}/`;
} else {
console.error('Invalid id_uuid. Unable to redirect.');
}
}
function updateImportedFilesList(documents) {
console.log('updateImportedFilesList(documents) executed with success', documents);
var fileListHTML = '<ul>';
documents.forEach(function (doc) {
console.log('Document:', doc);
fileListHTML += '<li>' +
'<div class="file-info">' +
'<span class="file-name">' + doc.file_name + '</span>' +
'<button class="convert-btn" data-uuid="' + doc.uuid + '">Convert</button>' +
'</div>' +
'</li>';
});
if (documents.length >= 2) {
fileListHTML += '<li>' +
'<div class="convert-all-btn-container">' +
'<button class="convert-all-btn" disabled>Convert All files into one CSV</button>' +
'</div>' +
'</li>';
}
fileListHTML += '</ul>';
// Update the fileSelector div with the list of imported files
uploadStatusContainer.innerHTML = fileListHTML;
// Attach a click event listener to the closest common parent of the buttons
var convertButtonsContainer = document.getElementById('uploadStatusContainer');
convertButtonsContainer.addEventListener('click', function (event) {
var targetButton = event.target.closest('.convert-btn');
if (targetButton) {
var id_uuid = targetButton.getAttribute('data-uuid');
singleConvert(id_uuid);
}
});
//Hide the label and file input after upload
var uploadLabel = document.getElementById('selectButton');
var uploadInput = document.getElementById('fileInput');
uploadLabel.style.display = 'none';
uploadInput.style.display = 'none';
}
