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

[אהרן]

@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();
		});
	}
})

[אהרן]

צד שרת

    const express = require('express');
    const app = express();
    let multer  = require('multer')
    let upload = multer({ dest: 'uploads/' })

    app.post('/tchumim/ajax/createNewProject', upload.single('file'), createNewProject);
    
    function createNewProject( req , res ) {
    'use strict';
    console.log('createNewProject')
        
        let body = req.body;
        console.dir( body )
        console.dir( req.file )

[dovid]

הקוד (צד שרת) פולט שגיאה כל שהיא? לפי התיעוד שלהם זה אמור לעבוד לך.
העובדה שכתבת { dest: 'uploads/' } גורמת לnulter להניח שישנה כזו תיקיה ולנסות לשמור שם את הקובץ פיזית. ייתכן שאן אין תיקיה הוא יוצר אותה, ייתכן שהוא מתעלם וגם... ייתכן

(נ.ב. הקוד שלך לא הכי נעים לקריאה. ההזחות, ונקודה פסיק לא עקביים. ומה הסיבה שאתה תוקע את 'use strict' באמצע פונקציות? אתה לא משתמש בIDE כל שהוא?).

[אהרן]

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

הקוד (צד שרת) פולט שגיאה כל שהיא? לפי התיעוד שלהם זה אמור לעבוד לך.

שום שגיאה
הפלט
createNewProject
undefined
undefined

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

(נ.ב. הקוד שלך לא הכי נעים לקריאה

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