Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2018, 11:48
Новичок на форуме
Отправить личное сообщение для andysh888 Посмотреть профиль Найти все сообщения от andysh888
 
Регистрация: 09.11.2018
Сообщений: 1

Bootstrap FileInput - инициализация с предзагрузкой файла
Использую в проекте Bootstrap FileInput ( http://plugins.krajee.com/file-input ).

Плагин всем устраивает - сама по себе загрузка в Async-режиме работает без проблем. Всё хорошо. Проблема в следующем: в проекте возникла необходимость сохранять "черновики форм". С сохранением самой формы проблем нет, а вот с загружаемыми файлами - проблема. Сохранить файлы инициированием метода upload - не проблема. Всё сохраняется на сервер. А вот потом при загрузке страницы надо в аплоадер подгрузить файлы.

Тест-файл при сохранении сохраняется в /uploads/test.jpg
Сейчас пробую так:
HTML:
<input type="file" id="t1" name="t1" class="file-input-ajax" multiple="multiple" data-signed="1">
<button id="upl">Upload</button>


let uploader_options = {
	allowedFileExtensions: ["jpg", "png", "tiff"],
	language: 'ru',
	fileActionSettings: {showUpload: false, showZoom: false},
	showUpload: false,
	uploadAsync: true,
	overwriteInitial: false,
	append: true,
	maxFileCount: 5,
	browseOnZoneClick: true,
	uploadExtraData: function () { 
		var ret = {};
		ret['field'] = $(this)[0].uploadFileAttr;
		ret['obj_type'] = 'apply';
		ret['obj_action'] = 'send';
		return ret;
	},
	uploadUrl: "/ajax/fileupload.php", 
	initialPreview: ['/uploads/test.jpg'],
	initialPreviewAsData: true,
	initialPreviewConfig: [{ caption: "test.jpg", size: 72564 }]
};

$(function() {
	var blob = null;
	var xhr = new XMLHttpRequest();
	xhr.open("GET", '/uploads/test.jpg');
	xhr.responseType = "blob";
	xhr.onload = function()
	{
		blob = xhr.response;//xhr.response is now a blob object
		console.log(blob);
		$('#t1').fileinput('AddToStack',blob);
	};
	xhr.send();

	$('#t1').fileinput(uploader_options);
	$('#upl').on('click', function(){
		$('#t1').fileinput('upload');
	});
});


Превью подгружается корректно, но при попытке upload - содержимое файла не прилетает на сервер (хотя запрос генерируется).

Подгрузка через
$('#t1').fileinput('AddToStack',blob);

Это уже "от безнадёги". Есть у кого опыт с этим плагином?

Как инициализировать с подгрузкой с сервера файлов? (причём файлы потом должны именно полноценно загрузиться ещё раз, так как идея в том, что пользователь должен иметь возможность убрать или добавить файлы после загрузки "черновика" - там могут быть как ранее сохранённые, так и вообще другой новый набор - так что надо грузить).
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2018, 15:42
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,007

забирать файлы с сервера не надо.

самый простой вариант - по отдельности аплоадить файлы и держать их на сервере, а в документе оперировать списком ссылок на эти загруженные файлы. Этот список и сохранять легко, и редактировать. При удалении черновика или документа удалить все связанные с ним загруженные файлы.

таким образом каждый файл будет загружаться только один раз.

возможный минус - лишние издержки, если юзер выбрал файл, потом передумал и удалил, и т.д.. Навскидку, это бывает нечасто. Но если для тебя это критичный кейс и возникает чаще чем хотелось бы, то можно упороться и поддерживать смешанный список, в котором могут быть как ссылки на ранее загруженные файлы (уже на сервере), так и свежесозданные пункты, которые пока держат файл только на клиенте и зааплоадятся при сохранении черновика или создании документа.

Последний раз редактировалось Alexandroppolus, 09.11.2018 в 15:47.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск