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

אהרן

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

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

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

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

אהרן

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

תחומים - פורום חרדי מקצועי

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