Allow file and image fields

- Use FormData class
- Replace existing Company image upload form
This commit is contained in:
Oliver 2021-06-30 00:13:53 +10:00
parent 33ec91acc7
commit 293b5d4c07
5 changed files with 65 additions and 59 deletions

View File

@ -157,10 +157,22 @@
{% endif %} {% endif %}
$("#company-image-upload").click(function() { $("#company-image-upload").click(function() {
launchModalForm(
"{% url 'company-image' company.id %}", constructForm(
'{% url "api-company-detail" company.pk %}',
{ {
reload: true method: 'PATCH',
fields: {
image: {},
},
title: '{% trans "Upload Image" %}',
onSuccess: function(data) {
if (data.image) {
$('#company-image').attr('src', data.image);
} else {
location.reload();
}
}
} }
); );
}); });

View File

@ -20,7 +20,6 @@ company_detail_urls = [
url(r'^sales-orders/', views.CompanyDetail.as_view(template_name='company/sales_orders.html'), name='company-detail-sales-orders'), url(r'^sales-orders/', views.CompanyDetail.as_view(template_name='company/sales_orders.html'), name='company-detail-sales-orders'),
url(r'^notes/', views.CompanyNotes.as_view(), name='company-notes'), url(r'^notes/', views.CompanyNotes.as_view(), name='company-notes'),
url(r'^thumbnail/', views.CompanyImage.as_view(), name='company-image'),
url(r'^thumb-download/', views.CompanyImageDownloadFromURL.as_view(), name='company-image-download'), url(r'^thumb-download/', views.CompanyImageDownloadFromURL.as_view(), name='company-image-download'),
# Any other URL # Any other URL

View File

@ -232,20 +232,6 @@ class CompanyImageDownloadFromURL(AjaxUpdateView):
) )
class CompanyImage(AjaxUpdateView):
""" View for uploading an image for the Company """
model = Company
ajax_template_name = 'modal_form.html'
ajax_form_title = _('Update Company Image')
form_class = CompanyImageForm
permission_required = 'company.change_company'
def get_data(self):
return {
'success': _('Updated company image'),
}
class CompanyDelete(AjaxDeleteView): class CompanyDelete(AjaxDeleteView):
""" View for deleting a Company object """ """ View for deleting a Company object """

View File

@ -69,39 +69,6 @@ function createCompany(options={}) {
} }
// Launch form to create a new manufacturer part
function createManufacturerPart(options={}) {
var fields = {
'part': {
secondary: {
label: '{% trans "New Part" %}',
}
},
'manufacturer': {
secondary: {
label: '{% trans "New Manufacturer" %}',
}
},
'MPN': {},
'description': {},
'link': {},
};
fields = Object.assign(fields, options.fields || {});
constructForm(
'{% url "api-manufacturer-part-list" %}',
{
fields: fields,
method: 'POST',
follow: true,
title: '{% trans "Add new Manufacturer Part" %}',
}
);
}
function loadCompanyTable(table, url, options={}) { function loadCompanyTable(table, url, options={}) {
/* /*
* Load company listing data into specified table. * Load company listing data into specified table.

View File

@ -350,8 +350,8 @@ function constructFormBody(fields, options) {
// Set the form title and button labels // Set the form title and button labels
modalSetTitle(modal, options.title || '{% trans "Form Title" %}'); modalSetTitle(modal, options.title || '{% trans "Form Title" %}');
modalSetSubmitText(options.submitText || '{% trans "Submit" %}'); modalSetSubmitText(modal, options.submitText || '{% trans "Submit" %}');
modalSetCloseText(options.cancelText || '{% trans "Cancel" %}'); modalSetCloseText(modal, options.cancelText || '{% trans "Cancel" %}');
// Insert generated form content // Insert generated form content
$(modal).find('.modal-form-content').html(html); $(modal).find('.modal-form-content').html(html);
@ -387,8 +387,8 @@ function constructFormBody(fields, options) {
*/ */
function submitFormData(fields, options) { function submitFormData(fields, options) {
// Data to be sent to the server // Form data to be uploaded to the server
var data = {}; var form_data = new FormData();
// Extract values for each field // Extract values for each field
options.field_names.forEach(function(name) { options.field_names.forEach(function(name) {
@ -399,16 +399,32 @@ function submitFormData(fields, options) {
var value = getFormFieldValue(name, field, options); var value = getFormFieldValue(name, field, options);
data[name] = value; // Handle file inputs
if (field.type == 'image upload' || field.type == 'file upload') {
var field_el = $(options.modal).find(`#id_${name}`)[0];
var field_files = field_el.files;
if (field_files.length > 0) {
// One file per field, please!
var file = field_files[0];
form_data.append(name, file);
}
} else {
// Normal field (not a file or image)
form_data.append(name, value);
}
} else { } else {
console.log(`WARNING: Could not find field matching '${name}'`); console.log(`WARNING: Could not find field matching '${name}'`);
} }
}); });
// Submit data // Submit data
inventreePut( inventreeFormDataUpload(
options.url, options.url,
data, form_data,
{ {
method: options.method, method: options.method,
success: function(response, status) { success: function(response, status) {
@ -464,6 +480,9 @@ function updateFieldValues(fields, options) {
case 'related field': case 'related field':
// TODO? // TODO?
break; break;
case 'file upload':
case 'image upload':
break;
default: default:
el.val(value); el.val(value);
break; break;
@ -1017,6 +1036,10 @@ function constructInput(name, parameters, options) {
case 'related field': case 'related field':
func = constructRelatedFieldInput; func = constructRelatedFieldInput;
break; break;
case 'image upload':
case 'file upload':
func = constructFileUploadInput;
break;
default: default:
// Unsupported field type! // Unsupported field type!
break; break;
@ -1101,7 +1124,6 @@ function constructCheckboxInput(name, parameters, options) {
'checkbox', 'checkbox',
parameters parameters
); );
} }
@ -1193,6 +1215,26 @@ function constructRelatedFieldInput(name, parameters, options) {
} }
/*
* Construct a field for file upload
*/
function constructFileUploadInput(name, parameters, options) {
var cls = 'clearablefileinput';
if (parameters.required) {
cls = 'fileinput';
}
return constructInputOptions(
name,
cls,
'file',
parameters
);
}
/* /*
* Construct a 'help text' div based on the field parameters * Construct a 'help text' div based on the field parameters
* *