פתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?

[אהרן]

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

תקרא את המאמר הזה: https://www.html5rocks.com/en/tutorials/file/dndfiles/
בסבלנות שלב אחרי שלב. אם יש שאלה ספציפית שאל.

תודה רבה!
למעשה עשיתי נכון, רק שבדקתי א"ז ע"י הדפסת האוונט לקונסול, ושם המאפיין פייל היה ריק
רק אם אני שומר א"ז קודם
var files = e.dataTransfer.files;
המידע על הקובץ נשמר.

אגב, ממש מסקרן מדוע אתר התמיכה של נטפרי משתמש במאפיין items בזמן שאצלי הוא תמיד ריק, איך זה בכלל עובד<

[אהרן]

@dovid
לאיזה פורמט צריך לרנדר קובץ docx ?

[dovid]

@אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

@dovid
לאיזה פורמט צריך לרנדר קובץ docx ?

מה הכונה צריך? מי צריך?

[אהרן]

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

מה הכונה צריך? מי צריך?

בשביל להעלות את הקובץ לשרת.

מהכתבה שהבאת הבנתי שאוביקט הfile מחזיק רק מידע על הקובץ, ובשביל לשלוח את הקובץ עצמו צריך לרנדר (=לקרוא) את אותו ואז אפשר לשלוח את תכולתו.

אז הנחתי שצורת הרנדור יכולה להשפיע על תכולת הקובץ, ואם אבחר בצורה הלא נכונה, השרת לא יצליח לקרוא את הקובץ.

הבנתי נכון?

כך כתבתי את הקוד:

<textarea drop-zone upload-data="vm.uploadData" ng-model="vm.uploadData.text"

    .directive('dropZone', ['$http', function($http){
    	return {
		    scope: {
		    	uploadData: '=',
		    },
		    link: function (scope, element, attrs) {
	
				element.bind("drop", function (e) {
					e.stopPropagation();
					e.preventDefault();
					let file = e.dataTransfer.files[0];
					scope.uploadData.fileObj = file;
					
					var reader = new FileReader();
						//reader.onload = function( theFile ) {
					reader.onloadend = function( theFile ) {
						scope.uploadData.contentFile = reader.result;
					}
                                        reader.readAsBinaryString(file)
					scope.$apply()
				});
				
				element.bind("dragover", function (e) {
					e.stopPropagation();
					e.preventDefault();
					e.dataTransfer.dropEffect = 'copy';
				});
			}
		}
	}]);

האם הכתיבה והאנלוגיה נכונה?

[אהרן]

ואז אחרי שיש את תוכן הקובץ (ופרטים נוספים שמכניסים בשדות יעודיים), לוחצים על האינופוט "צור פרויקט), ששולח הכל לשרת.
לאינפוט מוצמד ארוע קליק שיושב על הקונטרולר

		function makeNewProject () {
			$http({
				method: 'POST',
				url: 'serverUrl',
				data: {
					projectName: 'myProject',
					data: vm.uploadData.contentFile,
				}
			}).then( function( res ){
			}, function(errRes){
				serverError();
			});
		}

[dovid]

לא, אתה טועה.
בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

[אהרן]

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

לא, אתה טועה.
בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

אז איך שולחים
את אוביקט הקובץ?

[dovid]

@אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

לא, אתה טועה.
בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

אז איך שולחים
את אוביקט הקובץ?

כן, בFormData אפשר לכלול את אובייקט הקובץ והדפדפן מעלה אותו כמו בform פשוט.

[אהרן]

משום מה, מגיע לשרת אוביקט ריק

				data = new FormData();
				data.append('file', vm.uploadData.fileObj);
				console.log(data)
			$http({
				method: 'POST',
				url: url,
				data: { data: data },
				headers: { 'Content-Type': undefined}
			}

משהו פה לא נכון?

[dovid]

תצרף גם מה שהודפס בconsole.log.
(אגב למה שמת 'Content-Type': undefined ?, אולי זה הבעיה?)

[אהרן]

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

(אגב למה שמת 'Content-Type': undefined ?, אולי זה הבעיה?)

לא, זה אחד הנסיונות לתקן את הבעיה.

---

זה הקוד בסרוור

app.post('/xxx/ajax/createNewProject', createNewProject);
    
    function createNewProject( req , res ) {
    'use strict';
    console.log('createNewProject')
        
        let body = req.body;
        console.log( body.data )
        console.dir( body )

הלוג:

undefined
{}

[dovid]

בקוד שלך היה console.log(data)
ביקשתי את הפלט שלו.

[אהרן]

@dovid

FormData {}__proto__: FormData

[אהרן]

כשאני מדפיס console.log(vm.uploadData.fileObj) זה גם נראה בסדר

File(110866) {name: "חדשושן.docx", lastModified: 1520200202739, lastModifiedDate: Sun Mar 04 2018 23:50:02 GMT+0200 (שעון רגיל ירושלים), webkitRelativePath: "", size: 110866, …}
lastModified
:
1520200202739
lastModifiedDate
:
Sun Mar 04 2018 23:50:02 GMT+0200 (שעון רגיל ירושלים) {}
name
:
"חדשושן.docx"
size
:
110866
type
:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
webkitRelativePath
:
""
__proto__
:
File

[אהרן]

עד עכשיו השתמשתי ב

app.use(express.bodyParser());

אבל עכשיו זה מחזיר שגיאה

Error: invalid json

אז החלפתי לזה:

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

וגם פה קבלתי שגיאה

PayloadTooLargeError: request entity too large

---

אין לי כבר כח

[zvizvi]

@אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

request entity too large

המלצה שלי להשתמש בmulter עבור העלאת קבצים.

https://github.com/expressjs/multer

[dovid]

הconsole בצד הלקוח אמר את דברו. אם הFormData מקבל File תקין, אז "האשמה" מתגלגלת לפתחו של צד השרת. אכן, חיפוש בגוגל של expressjs receive input file מעלה שזה לא עובד בדרך הזו.
נסה את המלצתו של @zvizvi.

[אהרן]

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

נסה את המלצתו של @zvizvi.

body מגיע אנדיפיינד
אוף!!

[dovid]

@אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

נסה את המלצתו של @zvizvi.

body מגיע אנדיפיינד
אוף!!

במקום אוף תביא קוד. ולמה אתה חושב שהכל מובן מאליו? רק במקרוסופט או אנגולר יש כזו אידליה. בפרימוורקים כמו אקספרס אתה חייב לקחת שליטה על כל דבר שזז.

[אהרן]

				<textarea drop-zone upload-data="vm.uploadData" ng-model="vm.uploadData.text"
				class="one"
				placeholder="גררו לכאן את הקובץ הרצוי,&#10או הדביקו כאן את הטקסט"
				/>

				<button ng-click="vm.createNewProject()" >
					צור פרויקט
					<span ng-if="vm.uploadData.projectName">"{{vm.uploadData.projectName}}"</span>
				</button>

    .directive('dropZone', ['$http', function($http){
    	return {
		    scope: {
		    	uploadData: '=',
		    },
		    link: function (scope, element, attrs) {
	
				element.bind("drop", function (e) {
					e.stopPropagation();
					e.preventDefault();
					let file = e.dataTransfer.files[0];
					
					if (file.name.indexOf('.txt') != -1)
						scope.uploadData.type = 'txt';
					if (file.name.indexOf('.docx') != -1)
						scope.uploadData.type = 'docx';
						
					if( !scope.uploadData.type )
						return alert('לא קובץ docx / txt');
						
					if( scope.uploadData.text )
						return alert('יש כבר טקסט')

						
					scope.uploadData.fileObj = file;
				});
				
				element.bind("dragover", function (e) {
					e.stopPropagation();
					e.preventDefault();
					e.dataTransfer.dropEffect = 'copy';
					//console.log('dragover')
					//console.log(e)
				});
			}
		};
	}]);

	function createNewProject () {
			
		if( vm.uploadData.text )
			vm.uploadData.type = 'text'
			
		if( !vm.uploadData.type )
			return alert('אין תוכן לפרק')

		if( !vm.uploadData.projectName )
			return alert('אנא הגדר את שם הפרויקט')
			
		let upData = false;
		upData = new FormData();
		upData.append('file', vm.uploadData.fileObj);
		upData.append('file2', 'ddd');
		console.log(upData)
		console.log(vm.uploadData.fileObj)
		for(let t of upData) {console.log(t)}

		$http({
			method: 'POST',
			url: 'tchumim/ajax/createNewProject',
			data: upData,
			/*headers: { 'Content-Type': undefined}
			headers: { 'Content-Type': 'application/json; charset=UTF-8' },*/
		}).then( function( res ){
		}, function(errRes){
			serverError();
		});
	}
})