Estoy tratando de subir archivos PSD desde la parte de admin de mi sistema.
La característica de los PSD que están tratando de subir es que son muy pesados, en promedio de 200 MB, y pues como es de esperarse, la petición se muere.
De manera local, me aparecía el siguiente error:
Entonces lo que hice, fue modificar de manera local los archivos php.ini
con lo siguiente:
memory_limit=-1
max_input_time=600
post_max_size=300M
upload_max_filesize=300M
max_input_vars=100000000
Además de modificar también el nginx.conf
también de manera local, con lo siguiente:
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server_names_hash_bucket_size 64;
client_max_body_size 300M;
client_header_timeout 3000;
client_body_timeout 3000;
fastcgi_read_timeout 3000;
client_max_body_size 300M;
fastcgi_buffers 8 128k;
fastcgi_buffer_size 128k;
}
Implementé una carga por AJAX para ese archivo especial, primero pedí que fuera un .zip
para reducir la carga lo más posible. Y luego codifiqué esto:
$(document).on('change', 'input[name="psd_1"]', function() {
var input_psd = $(this);
uploadPsdAjax(input_psd, 1);
});
function uploadPsdAjax(input_psd, number) {
var _URL = window.URL || window.webkitURL;
var file = (input_psd[0].files[0]);
//var blob_url = window.URL.createObjectURL(file); // No se usa
var product_id = $('input[name="product"]').val()
var action = "/upload-psd"; //Route in web.php
var original_label = input_psd.closest('.backstrap-file').siblings('label');
original_label.text(original_label.text() + ' Cargando...');
var formData = new FormData();
formData.append('file', file);
formData.append('product_id', product_id);
formData.append('number', number);
console.log(formData.get('file'), formData.get('number')); // In log you cannot see logging only formData, use .get()
new Noty({
text: 'Empezando la subida del PSD para la perspectiva ' + number,
type: 'info',
animation: {
open: 'animated bounceInRight', // Animate.css class names
close: 'animated bounceOutRight' // Animate.css class names
}
}).show();
if (product_id) {
$.ajax({
type: 'POST',
url: action,
data: formData,
/*THIS MUST BE DONE FOR FILE UPLOADING*/
contentType: false,
processData: false,
}).done(function(response) {
console.log("DONE", response);
new Noty({
text: 'Subida exitosa. El archivo PSD se asignó correctamente',
type: "success",
animation: {
open: 'animated bounceInRight', // Animate.css class names
close: 'animated bounceOutRight' // Animate.css class names
}
}).show();
}).fail(function(data) {
console.log("FAIL", data.responseText);
var html_string = data.responseText;
html = $(html_string);
console.log(html.toArray()[1]['innerText']);
if (html.toArray()[1]['innerText'] == "504 Gateway Time-out") {
new Noty({
text: 'Subida exitosa. El archivo PSD se asignó correctamente',
type: "success",
animation: {
open: 'animated bounceInRight', // Animate.css class names
close: 'animated bounceOutRight' // Animate.css class names
}
}).show();
} else {
new Noty({
text: 'Algo falló en la subida del PSD',
type: "error",
animation: {
open: 'animated bounceInRight', // Animate.css class names
close: 'animated bounceOutRight' // Animate.css class names
}
}).show();
}
});
} else {
new Noty({
text: 'No puedes subir PSDs cuando creas un nuevo product, guárdalo, regresa y carga de uno en uno',
type: "info",
}).show();
}
}
Lo que hace es mandar el request
con ciertas condiciones en el AJAX, hacia el siguiente método de un controlador:
public function uploadPsd(Request $request)
{
$response['code'] = "200";
// Set which bucket to work in
$bucketName = "myproject.appspot.com";
// Get local file for upload testing
$fileContent = file_get_contents($_FILES["file"]["tmp_name"]);
// Defining path
$cloudPath = 'test/psd1.zip';
$isSucceed = $this->uploadFile($bucketName, $fileContent, $cloudPath);
if ($isSucceed == true) {
$response['msg'] = 'SUCCESS: to upload ' . $cloudPath . PHP_EOL;
// TEST: get object detail (filesize, contentType, updated [date], etc.)
$response['data'] = $this->getFileInfo($bucketName, $cloudPath);
//Save path DB...
} else {
$response['code'] = "201";
$response['msg'] = 'FAILED: to upload ' . $cloudPath . PHP_EOL;
}
header("Content-Type:application/json");
return json_encode($response);
}
Y todo se sube correctamente, cuando trabajo en local, aparece en el bucket de Google directamente, con éxito, pero aparece el error 504 (Gateway Time-out)
, pero repito, el archivo se sube correctamente, a pesar de que manda ese error.
Cuando lo probé en línea, ya en el servidor producción, el AJAX inmediatamente mandaba el error Your client issued a request that was too large
a lo que pensé que podría solucionarse creando un archivo nginx-app.conf
con las variables antes mencionadas, pero sin éxito. Consulté esta pregunta aquí.
Estoy muy cerca de lograr la carga, funciona con "éxito" en local y sube al bucket el .zip, a pesar de marcar 504 (Gateway Time-out)
, de manera local.
En producción, no puedo avanzar más, inmediatamente dice Your client issued a request that was too large Error 413 (Request Entity Too Large)
nginx.conf
paraclient_max_body_size
es 300M. Aún así sigue saliendo error413 Request Entity Too Large
. Usécomposer dump-autoload
yphp artisan optimize