I have been looking to allow agents to upload and crop on there side before uploading or saving on our servers.
I was wondering if anybody could help me out buy giving some info regarding it. I have done some resaerch and because of some of our users are still using IE 8 I need to be able to use either flash but for certain mobile users flash cannot be used. I have found something called fileAPI http://mailru.github.io/FileAPI/ wich if my understanding is correct that I can use this for both the old browsers and the new including the mobile devices.
My main question though as there is not much documentation or i'm not understanding the documentation correctly if anybody could maybe break it down in laymans terms for me please.
some of my code so far goes as:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="localhost" secure="false"/>
<allow-access-from domain="*localhost" secure="false"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test fileAPI uploader</title>
<link href="css/colorbox.css" rel="stylesheet"/>
<script src="jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/js/FileAPI.min.js"></script>
<script>
var FileAPI = {
// @default: "./dist/"
staticPath: '/js/',
// @default: FileAPI.staticPath + "FileAPI.flash.swf"
flashUrl: '/statics/FileAPI.flash.swf',
// @default: FileAPI.staticPath + "FileAPI.flash.image.swf"
flashImageUrl: '/statics/FileAPI.flash.image.swf'
};
</script>
<script>
window.FileAPI = {
debug: false, // debug mode, see Console
cors: false, // if used CORS, set `true`
media: false, // if used WebCam, set `true`
staticPath: '/js/FileAPI/dist', // path to '*.swf'
postNameConcat: function (name, idx) {
// Default: object[foo]=1&object[bar][baz]=2
// .NET: https://github.com/mailru/FileAPI/issues/121#issuecomment-24590395
return name + (idx != null ? '[' + idx + ']' : '');
}
};
</script>
</head>
<body>
<%--<form name="userpic" class="upload">--%>
<div class="uploader">
<!-- "js-fileapi-wrapper" -- required class -->
<div class="js-fileapi-wrapper upload-btn" id="choose">
<div class="upload-btn__txt">Choose files</div>
<input name="files" type="file" />
</div>
<div class="buttons">
<div class="okUpload"></div>
<input name="buttonOk" type="button" Value="Ok" />
<input name="buttonCancel" type="button" value="Cancel"/>
</div>
<div id="images"><!-- previews --></div>
</div>
<%--</form>--%>
</body>
<script type="text/javascript">window.FileAPI = { staticPath: '/jquery/FileAPI/dist/' };</script>
<script src="jquery/FileAPI/dist/FileAPI.min.js"></script>
<script>
FileAPI.event.on(choose, 'change', function (evt) {
var files = FileAPI.getFiles(evt); // Retrieve file list
FileAPI.filterFiles(files, function (file, info/**Object*/) {
if (/^image/.test(file.type)) {
return info.width >= 320 && info.height >= 240;
}
return false;
},
function (files/**Array*/, rejected/**Array*/) {
if (files.length) {
autoupload: true,
// Make preview 350x350
FileAPI.each(files, function (file) {
FileAPI.Image(file).preview(350).get(function (err, img) {
images.appendChild(img);
});
});
// Uploading Files
FileAPI.upload({
url: './ctrl.php',
files: { images: files },
progress: function (evt/**Object*/, file/**Object*/, xhr/**Object*/, options/**Object*/) { var pr = evt.loaded / evt.total * 100; },
complete: function (err/**String*/, xhr/**Object*/, file/**Object/, options/**Object*/){ if( !err ){
// File successfully uploaded
var result = xhr.responseText;
}
},
});
}
});
});
function buttonCancel() {
}
</script>
</html>
For some reason I don't think its using all the script at the bottom per say.