Простите за несколько случайный характер этого блога. У меня есть ограниченное количество времени, прежде чем я сижу в самолете, но я не хотел ждать до утра, чтобы отправить. Ранее сегодня читатель (Arcayne — звучит как X-Man начала 80-х) опубликовал комментарий, благодаря которому я обнаружил, что JavaScript-API Parse теперь поддерживает файлы. Это не было возможно в прошлом. Вы можете прочитать подробности об этом здесь, но для тех, кто хочет увидеть полный демонстрационный код, продолжайте читать.
Первое, что я сделал, это построил полную демонстрацию, используя их пример загрузки файла. Я начал с создания простого файла HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<input type="file" id="fileUploader">
<button id="fileUploadBtn">Send</button>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/parse-1.2.8.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Обратите внимание, у меня загружена библиотека Parse. HTML просто содержит поле файла и кнопку. Вот код JavaScript:
$(document).ready(function() {
var parseAPPID = "x";
var parseJSID = "x";
//Initialize Parse
Parse.initialize(parseAPPID,parseJSID);
$("#fileUploadBtn").on("click", function(e) {
var fileUploadControl = $("#fileUploader")[0];
if (fileUploadControl.files.length > 0) {
var file = fileUploadControl.files[0];
var name = "photo.jpg";
console.log("here goes nothing...");
var parseFile = new Parse.File(name, file);
parseFile.save().then(function() {
console.log("Woot!");
console.dir(arguments);
}, function(error) {
console.log("Error");
console.dir(error);
});
}
});
});
По большей части это то, что есть в документации Parse, но, как полный файл, надеюсь, это будет полезно. Я могу подтвердить, что это сработало отлично. В объекте результата я получил URL к загруженной картинке. Конечно, если бы я не выбрал изображение, это не сработало бы. У вас есть доступ к имени файла, поэтому теоретически строка 14 может быть легко сделана динамической.
Хорошо, я плохо себя чувствовал. Исправление было одной строкой:
var name = file.name;
В зипе я поделюсь, это исправлено. Так что — это будет работать в PhoneGap, если ваш мобильный клиент позволяет поля загрузки файлов. Я не уверен, что делать. Я знаю, что iOS позволяет вам снимать камеру с одной, но я не уверен, помню ли я, позволяет ли она также выбирать файлы. Как я уже сказал, я спешу.
Мой настоящий вопрос, хотя, было ли это работать с PhoneGap Я создал тест, чтобы посмотреть, смогу ли я использовать Camera API и загрузить его в Parse. Для моего первого теста я решил просто использовать Base64. Это одна из опций в PhoneGap, и она работает также с Parse. Оказывается, это сработало очень просто. Я не буду беспокоиться о HTML, только о JavaScript, и я просто сосредоточусь на важной части.
$("#takePicBtn").on("click", function(e) {
e.preventDefault();
navigator.camera.getPicture(gotPic, failHandler, {quality:50, destinationType:navigator.camera.DestinationType.DATA_URL, sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY});
});
function gotPic(data) {
var parseFile = new Parse.File("mypic.jpg", {base64:data});
parseFile.save().then(function() {
navigator.notification.alert("Got it!", null);
console.log("Ok");
console.log(arguments.toString());
}, function(error) {
console.log("Error");
console.log(error);
});
}
Опять же — я предполагаю, что все это довольно просто, но если это не имеет смысла, дайте мне знать. Я указал библиотеку фотографий во время тестирования на симуляторе iOS.
Woot. Так что это работает. Но — я слышал, что использование base64 для данных изображения в PhoneGap может потребовать немного больше памяти. Parse также поддерживает двоичный массив, поэтому я создал еще одну демонстрацию, в которой также используются «настоящие» файлы. Это оказалось немного сложнее.
Первое — PhoneGap может сохранить изображение с камеры в файловую систему. Эта часть проста. Но File API — не самая простая вещь для использования. API PhoneGap возвращает URI файла, который необходимо превратить в объект File, который затем необходимо отправить в устройство чтения файлов. Наконец, вы можете получить объект буфера массива, но вместо Parse нужен реальный массив. (И за эту часть я должен поблагодарить Си Робертсона за его помощь в G +.)
Вот код, который я использовал. Это не красиво. Но это работает.
function gotPic(data) {
window.resolveLocalFileSystemURI(data, function(entry) {
var reader = new FileReader();
reader.onloadend = function(evt) {
var byteArray = new Uint8Array(evt.target.result);
var output = new Array( byteArray.length );
var i = 0;
var n = output.length;
while( i < n ) {
output[i] = byteArray[i];
i++;
}
var parseFile = new Parse.File("mypic.jpg", output);
parseFile.save().then(function(ob) {
navigator.notification.alert("Got it!", null);
console.log(JSON.stringify(ob));
}, function(error) {
console.log("Error");
console.log(error);
});
}
reader.onerror = function(evt) {
console.log('read error');
console.log(JSON.stringify(evt));
}
entry.file(function(s) {
reader.readAsArrayBuffer(s);
}, function(e) {
console.log('ee');
});
});
}
В любом случае — это очень круто и просто делает комбинацию Parse / PhoneGap еще круче. Я приложил копию своего кода с удаленными идентификаторами приложений. Наслаждайтесь!