FoxInCloud
Resizing image with jQuery before upload
Gravatar is a globally recognized avatar based on your email address. Resizing image with jQuery before upload
  Gilles Lajot-Sarthou
  All
  Dec 1, 2019 @ 11:40am

Hi Thierry, I need to resize images inside the client browser before uploading images.. I have tried, with success, to use the jQuery.FileUpload() function like in jQuery demo.. https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

But for using the specifics propeties of jQuery.Fileupload() to resize images, FoxInCloud need to generate correctly the html with the all .js included files (script js) with respecting the order between each included file.

I have changed in awserver.prg the function cAwJSinc:

PROTECTED FUNCTION cawJSinc && <script></script>+ tags {en} for FoxInCloud, application, form [, custom] {fr} De FoxInCloud, de l'application, du formulaire[, spécifiques]


...
	; && + [<script charset="utf-8" src="<<m.lcBower>>font-awesome/svg-with-js/js/fontawesome-all.js<<m.lcVersion>>"></script>] + CRLF
	+ Iif(m.this.ljQueryAdd; && <!-- The jQuery UI widget factory can be omitted if jQuery UI is already included -->
		, [];
		+ Iif(m.this.ljQueryUIadd;
		, [];
		, [<script charset="utf-8" src="<<m.lcBower>>blueimp-file-upload/js/vendor/jquery.ui.widget.js<<m.lcVersion>>"></script>] + CRLF;
		);
		+ [<script charset="utf-8" src="<<m.lcBower>>blueimp-file-upload/js/jquery.fileupload.js<<m.lcVersion>>"></script>] + CRLF;
		+ [<script charset="utf-8" src="<<m.lcBower>>blueimp-file-upload/js/jquery.iframe-transport.js<<m.lcVersion>>"></script>] + CRLF;
		, [];
		);
);
+ cScriptJS(m.this.cScriptJS) && modify command awTxt	


* {fr} Si fichiers JavaScript additionnels
IF ALines(laJSAdd, Evl(m.tcJSAdd, ''), 5, ',', ';') > 0
	FOR EACH lcJSAdd IN laJSAdd
		lcResult = m.lcResult;
			+ [<script charset="utf-8" src="];
			+ this.cVirtualAdd(Iif(Empty(JustExt(m.lcJSAdd)), ForceExt(m.lcJSAdd, 'js'), m.lcJSAdd) + '?' + URLEncode(this.cVersion));
			+ ["></script>];
			+ CRLF
	ENDFOR
ENDIF

return m.lcResult
endfunc

by


PROTECTED FUNCTION cawJSinc && <script></script>+ tags {en} for FoxInCloud, application, form [, custom] {fr} De FoxInCloud, de l'application, du formulaire[, spécifiques]

	; && + [<script charset="utf-8" src="<<m.lcBower>>font-awesome/svg-with-js/js/fontawesome-all.js<<m.lcVersion>>"></script>] + CRLF
	+ Iif(m.this.ljQueryAdd; && <!-- The jQuery UI widget factory can be omitted if jQuery UI is already included -->
		, [];
		+ Iif(m.this.ljQueryUIadd;
		, [];
		, [<script charset="utf-8" src="<<m.lcBower>>blueimp-file-upload/js/vendor/jquery.ui.widget.js<<m.lcVersion>>"></script>] + CRLF;
		);
		+ [<script charset="utf-8" src="<<m.lcBower>>blueimp-load-image/js/load-image.all.min.js<<m.lcVersion>>"></script>] + CRLF;
		+ [<script charset="utf-8" src="<<m.lcBower>>blueimp-canvas-to-blob/js/canvas-to-blob.min.js<<m.lcVersion>>"></script>] + CRLF;
		+ [<script charset="utf-8" src="<<m.lcBower>>blueimp-file-upload/js/jquery.iframe-transport.js<<m.lcVersion>>"></script>] + CRLF;
		+ [<script charset="utf-8" src="<<m.lcBower>>blueimp-file-upload/js/jquery.fileupload.js<<m.lcVersion>>"></script>] + CRLF;
		+ [<script charset="utf-8" src="<<m.lcBower>>blueimp-file-upload/js/jquery.fileupload-process.js<<m.lcVersion>>"></script>] + CRLF;
		+ [<script charset="utf-8" src="<<m.lcBower>>blueimp-file-upload/js/jquery.fileupload-image.js<<m.lcVersion>>"></script>] + CRLF;
		, [];
		);
);
+ cScriptJS(m.this.cScriptJS) && modify command awTxt	

* {fr} Si fichiers JavaScript additionnels
IF ALines(laJSAdd, Evl(m.tcJSAdd, ''), 5, ',', ';') > 0
	FOR EACH lcJSAdd IN laJSAdd
		lcResult = m.lcResult;
			+ [<script charset="utf-8" src="];
			+ this.cVirtualAdd(Iif(Empty(JustExt(m.lcJSAdd)), ForceExt(m.lcJSAdd, 'js'), m.lcJSAdd) + '?' + URLEncode(this.cVersion));
			+ ["></script>];
			+ CRLF
	ENDFOR
ENDIF

return m.lcResult
endfunc

How can i do that without modify the awserver.prg ?

Amicalement Gilles

Gravatar is a globally recognized avatar based on your email address. re: Resizing image with jQuery before upload
  FoxInCloud Support - Thierry N.
  Gilles Lajot-Sarthou
  Dec 2, 2019 @ 04:11am

Hi Gilles,

modify command awServer > PROTECTED FUNCTION cawJSinc gives you explanations and examples.

Gravatar is a globally recognized avatar based on your email address. re: Resizing image with jQuery before upload
  FoxInCloud Support - Thierry N.
  Gilles Lajot-Sarthou
  Dec 2, 2019 @ 04:11am

Hi Gilles,

modify command awServer > PROTECTED FUNCTION cawJSinc gives you explanations and examples.

© 1996-2024