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

[אהרן]

@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 אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

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

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

[אהרן]

משהו נוסף שתקע אותי, שהקוד הזה
app.use(express.bodyParser());
הוציא שגיאה שהקלט לא ג'ייסון (הוא לא מזהה א"ז לבד?? ומה אם צריך א"ז רק בחלק מהכתובות??)

[אהרן]

משהו מתחיל לזוז

החזרתי את

var bodyParser = require('body-parser');
// parse application/json
app.use(bodyParser.json({ limit: '50mb' }));
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));

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

[אהרן]

המולטר אכן לא עושה כלום
בבאדי יש מלא מידע בסטרינג ארוך, א"א או קשה לפיענוח.

{ '------WebKitFormBoundaryhsVAP9BjmAAZD3na\r\nContent-Disposition: form-data; name': '"file"; filename="aaaa.txt"\r\nContent-Type: text/plain\r\n\r\naharon\r\n------WebKitFormBoundaryhsVAP9BjmAAZD3na\r\nContent-Disposition: form-data; name="file2"\r\n\r\nddd\r\n------WebKitFormBoundaryhsVAP9BjmAAZD3na--\r\n' }

[אהרן]

עובד!!!!!! אוהההההה

צריך הידר headers: { 'Content-Type': undefined}
אחרת הוא מניח שזה בינארי וצועק (אם הבנתי נכון).

[clickone]

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

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

תיזהר @magicode כאן

[אהרן]

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

תיזהר @magicode כאן

לא נראה.