I’m still learning Django and there is still a lot of unknown to me.
The problem is that I can’t pull the .pdf (or any other format) to be sent by ajax post method to external API. So on the reciving side I only get the string location of the file not the actual file.
I have put the following javascript code in the generic_list_items_subtemplate.html
{% load i18n %}
{% load static %}
{% load common_tags %}
{% load navigation_tags %}
<div class="row">
<div class="col-xs-12">
<h4>
{% if page_obj %}
{% if page_obj.paginator.num_pages != 1 %}
{% blocktrans with page_obj.start_index as start and page_obj.end_index as end and page_obj.paginator.object_list|length as total and page_obj.number as page_number and page_obj.paginator.num_pages as total_pages %}Total ({{ start }} - {{ end }} out of {{ total }}) (Page {{ page_number }} of {{ total_pages }}){% endblocktrans %}
{% else %}
{% blocktrans with page_obj.paginator.object_list|length as total %}Total: {{ total }}{% endblocktrans %}
{% endif %}
{% else %}
{% blocktrans with object_list|length as total %}Total: {{ total }}{% endblocktrans %}
{% endif %}
</h4>
<hr>
<div class="well center-block">
<div class="clearfix">
<div class="pull-right">
<form action="{% url 'common:multi_object_action_view' %}" class="form-multi-object-action" method="get">
{% if object_list %}
{% if not hide_multi_item_actions %}
{% get_multi_item_links_form object_list %}
{% endif %}
{% if multi_item_actions %}
<fieldset style="margin-top: -10px;">
<input class="check-all" type="checkbox"/>
{{ multi_item_form }}
</fieldset>
{% endif %}
{% endif %}
</form>
</div>
</div>
{% if object_list %}
<hr style="border-bottom: 1px solid lightgrey;">
{% endif %}
<div class="row row-items">
{% for object in object_list %}
<div class="{{ column_class|default:'col-xs-12 col-sm-4 col-md-3 col-lg-2' }}">
<div class="panel panel-primary panel-item">
<div class="panel-heading">
<div class="form-group" id="myform">
<div class="checkbox">
<label for="id_indexes_0">
{% if multi_item_actions %}
{% if multi_select_item_properties %}
<input class="form-multi-object-action-checkbox check-all-slave checkbox" type="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" />
{% else %}
<input class="form-multi-object-action-checkbox check-all-slave checkbox" type="checkbox" name="{{ object.get_absolute_url }}" />
{% endif %}
{% endif %}
<span style="color: white; word-break: break-all; overflow-wrap: break-word;">
{% if not hide_object %}
{% if main_object %}
{% with object|object_property:main_object as object %}
{% if not hide_link %}<a name="test" href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
{% endwith %}
{% else %}
{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
{% endif %}
{% endif %}
</span>
</label>
</div>
</div>
</div>
<div class="panel-body">
{% if not hide_columns %}
{% for column in object|get_source_columns %}
<div class="text-center" style="">{% source_column_resolve column=column %}{{ column_result }}</div>
{% endfor %}
{% endif %}
{% for column in extra_columns %}
<div class="text-center"><span class="list-extra-column-label">{{ column.name }}</span>: {{ object|object_property:column.attribute }}</div>
{% endfor %}
{% if not hide_links %}
<p class="text-center">
{% get_menu_links 'object menu' source=object as resolved_links %}
{% for object_navigation_links in resolved_links %}
{% with 'true' as as_dropdown %}
{% include 'navigation/generic_navigation.html' %}
{% endwith %}
{% endfor %}
</p>
{% endif %}
</div>
</div>
</div>
{% empty %}
<div class="col-xs-12">
{% include 'appearance/no_results.html' %}
</div>
{% endfor %}
</div>
<!--</form>-->
{% include 'pagination/pagination.html' %}
</div>
</div>
</div>
<!--{% if object_list %}-->
<form method="post">
{% csrf_token %}
<input type="hidden" name="csrf-token" value="nc98P987bcpncYhoadjoiydc9ajD1cn">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3">
<button id="sendBTN" class="btn btn-success" type="submit">Send checked documents to another database</button>
</div>
<div class="col-md-3"></div>
</div>
</form>
<br>
<br>
<br>
<!--{% endif %}-->
<script type="text/javascript">
'use strict';
var $data = [];
$(document).on("click", "input[type='checkbox']", (e) => {
var name = $(e.target).attr("name");
if($(e.target).prop("checked")){
$data.push(name);
}else{
$data = jQuery.grep($data, function(value) {
return value != name;
});
}
console.log($data);
});
function csrfSafeMethod(method)
{
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if(!csrfSafeMethod(settings.type) && !this.crossDomain)
{
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
document.getElementById("sendBTN").onclick = function() {
var form_data = new FormData();
// form_data.append('file', $('#myform').get(0));
form_data.append('file', $data);
console.log(form_data);
$.ajax({
type: "POST",
// contentType: "application/x-www-form-urlencoded",
contentType : false,
processData: false,
url: "http://192.168.10.22:5000/api/FileRecive/GetDocument",
dataType: "json",
data: form_data,
success: function (data) {
data = $.parseJSON(data);
alert("success");
},
error: function (xhr) {
alert("error - " + xhr.statusText);
}
});
};
$(function() {
$('.row-items > [class*="col"] .panel-item .panel-heading').matchHeight();
$('.row-items > [class*="col"] .panel-item .panel-body').matchHeight();
$('.row-items > [class*="col"] .panel-item').matchHeight();
});
</script>
On the reciving side I am getting
name = "file" value = "/documents/12/preview/"
But I want to get the file not this string. I have no idea how to target file to send it dirrectly.
Advertisement
Answer
The URL “/documents/12/preview/” is the URL to view the document using the user interface. If what you want is the actual file of the document, you need to use Mayan’s API. Since documents in Mayan are a collection of versions, you need the ID of the latest version of the document you want. For this the API URL for the document detail which is:
“/api/documents/271/”
This will give you something like this:
From there look up the dictionary key “latest_version” and then the key “download_url”. The download URL in the screenshot is “http://127.0.0.1:8000/api/documents/271/versions/267/download/“. Do a GET request to this URL and you get the actual file of the document. Save the file in temporary variable (or Javascript Blob file object https://developer.mozilla.org/en-US/docs/Web/API/Blob) and then send it to your custom API with a POST request.
Another option is to just send the “download_url” to your API and have a worker process fetch the document data, that way you don’t have to store the binary data of the document in the browsers memory.
For more information about Mayan’s API go to “Tools” -> “API Documentation” and you’ll get an API documentation view that allows testing the API with the live data in your installation.
